@justifi/webcomponents 5.5.0 → 5.6.0

package/dist/collection/components/payment-transactions-list/payment-transactions-list.js

@@ -0,0 +1,248 @@
+import { h } from "@stencil/core";
+import { ComponentErrorCodes, ComponentErrorSeverity, pagingDefaults } from "../../api";
+import JustifiAnalytics from "../../api/Analytics";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
+import { makeGetPaymentTransactions } from "../../actions/payment/get-payment-transactions";
+import { PaymentService } from "../../api/services/payment.service";
+import { Table } from "../../utils/table";
+import { TableClickActions } from "../../ui-components/table/event-types";
+import { table, tableCell } from "../../styles/parts";
+import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
+import { defaultColumnsKeys, paymentTransactionTableCells, paymentTransactionTableColumns } from "./payment-transactions-table";
+export class PaymentTransactionsList {
+    constructor() {
+        this.balanceTransactions = [];
+        this.isLoading = true;
+        this.errorMessage = null;
+        this.paging = pagingDefaults;
+        this.pagingParams = {};
+        this.apiOrigin = PROXY_API_ORIGIN;
+        this.columns = defaultColumnsKeys;
+        this.handleClickPrevious = (beforeCursor) => {
+            this.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: TableClickActions.previous });
+        };
+        this.handleClickNext = (afterCursor) => {
+            this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: TableClickActions.next });
+        };
+        this.rowClickHandler = (e) => {
+            const clickedPaymentID = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedPaymentID)
+                return;
+            const transactionData = this.balanceTransactions.find((payment) => payment.id === clickedPaymentID);
+            this.clickEvent.emit({ name: TableClickActions.row, data: transactionData });
+        };
+    }
+    componentWillLoad() {
+        this.transactionsTable = new Table(this.balanceTransactions, this.columns, paymentTransactionTableColumns, paymentTransactionTableCells);
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+        this.initializeApi();
+    }
+    disconnectedCallback() {
+        this.analytics.cleanup();
+    }
+    propChanged() {
+        this.initializeApi();
+    }
+    handleError(code, errorMessage, severity) {
+        this.isLoading = false;
+        this.errorEvent.emit({ errorCode: code, message: errorMessage, severity });
+    }
+    initializeApi() {
+        if (this.paymentId && this.authToken) {
+            const getPaymentTransactions = makeGetPaymentTransactions({
+                id: this.paymentId,
+                authToken: this.authToken,
+                service: new PaymentService(),
+                apiOrigin: this.apiOrigin
+            });
+            getPaymentTransactions({
+                params: this.pagingParams,
+                onSuccess: ({ balanceTransactions, pagingInfo }) => {
+                    this.balanceTransactions = balanceTransactions;
+                    this.paging = pagingInfo;
+                    this.transactionsTable.collectionData = this.balanceTransactions;
+                },
+                onError: ({ error, code, severity }) => {
+                    this.errorMessage = error.message;
+                    this.handleError(error, code, severity);
+                },
+                final: () => {
+                    this.isLoading = false;
+                }
+            });
+        }
+        else {
+            this.errorMessage = 'payment-id and auth-token props are required';
+            this.handleError(ComponentErrorCodes.MISSING_PROPS, this.errorMessage, ComponentErrorSeverity.ERROR);
+        }
+    }
+    get entityId() {
+        return this.balanceTransactions.map((transaction) => transaction.id);
+    }
+    get showEmptyState() {
+        return !this.isLoading && !this.errorMessage && this.transactionsTable.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.isLoading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState && !this.isLoading;
+    }
+    render() {
+        return (h(StyledHost, { key: 'b011961e9c9b01720fa7964186e477784a7deddd' }, h("div", { key: '074eb86caf8be83e6cdc51ab496564358dafdeb5', class: "table-wrapper" }, h("table", { key: 'cc1453bcba758c6847d593a545918c449219eac4', class: "table table-hover", part: table }, h("thead", { key: '08bbac43b6484ed2f96061153a3d40a2d9f4da7d', class: "table-head sticky-top" }, h("tr", { key: '424dadd8f7686d62fcf3d3222a77c707d6e69985', class: "table-light text-nowrap" }, this.transactionsTable.columnData.map((column) => column))), h("tbody", { key: '3ef6863f785ff73b467f2c48fa91ed1bac57c7e2', class: "table-body" }, h(TableLoadingState, { key: '69da7b5801f492787ec6ce3b10fbd25e9580c0e1', columnSpan: this.transactionsTable.columnData.length, isLoading: this.isLoading }), h(TableEmptyState, { key: 'e6ff1509d0a54aaca9fbaa2e5ebd3e83a62ef17c', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnData.length }), h(TableErrorState, { key: '5cd693d69c7dc34807767d18ad97cc1f5fce52fe', columnSpan: this.transactionsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'c8e1ff59e7db5aeb4db84884360e3d9cf71a1552', class: "sticky-bottom" }, h("tr", { key: 'fd0b29ddeb0ed6114904ce4b875618c469349578', class: "table-light align-middle" }, h("td", { key: '340ae8d8132eb66a8c0cae500d708c4174ed5dc7', part: tableCell, colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: 'a2ea49ba4478b3e22a4587eed3262bc482cfd9b8', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+    }
+    static get is() { return "justifi-payment-transactions-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "paymentId": {
+                "type": "string",
+                "attribute": "payment-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "authToken": {
+                "type": "string",
+                "attribute": "auth-token",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "apiOrigin": {
+                "type": "string",
+                "attribute": "api-origin",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "PROXY_API_ORIGIN"
+            },
+            "columns": {
+                "type": "string",
+                "attribute": "columns",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "defaultColumnsKeys"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "balanceTransactions": {},
+            "transactionsTable": {},
+            "isLoading": {},
+            "errorMessage": {},
+            "paging": {},
+            "pagingParams": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clickEvent",
+                "name": "click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentClickEvent",
+                    "resolved": "ComponentClickEvent",
+                    "references": {
+                        "ComponentClickEvent": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentClickEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
+                    "references": {
+                        "ComponentErrorEvent": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentErrorEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "pagingParams",
+                "methodName": "propChanged"
+            }, {
+                "propName": "paymentId",
+                "methodName": "propChanged"
+            }, {
+                "propName": "authToken",
+                "methodName": "propChanged"
+            }];
+    }
+}

package/dist/collection/components/payment-transactions-list/payment-transactions-table.js

@@ -0,0 +1,45 @@
+import { h } from "@stencil/core";
+import { convertToLocal } from "../../utils/utils";
+import { getAlternateTableCellPart, tableHeadCell } from "../../styles/parts";
+export const defaultColumnsKeys = 'created_at,type,id,amount,balance';
+export const paymentTransactionTableColumns = {
+    created_at: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date and time each transaction was made" }, "Processed On")),
+    type: () => (h("th", { part: tableHeadCell, scope: "col", title: "The type of each transaction" }, "Type")),
+    id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The unique identifier of each transaction" }, "ID")),
+    amount: () => (h("th", { part: tableHeadCell, scope: "col", title: "The dollar amount of each transaction", class: "text-end" }, "Amount")),
+    balance: () => (h("th", { part: tableHeadCell, scope: "col", title: "The running total amount of this payment that belongs to you", class: "text-end" }, "Balance")),
+    currency: () => (h("th", { part: tableHeadCell, scope: "col", title: "The currency of each transaction" }, "Currency")),
+    financial_transaction_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The unique identifier of the financial transaction associated with the payment balance transaction" }, "Financial Transaction ID")),
+    payment_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The unique identifier of the payment associated with the payment balance transaction" }, "Payment ID")),
+    payment_balance_txn_type: () => (h("th", { part: tableHeadCell, scope: "col", title: "The type of the payment balance transaction" }, "Transaction Type")),
+    source_id: () => (h("th", { part: tableHeadCell, scope: "col", title: "The unique identifier of the source object associated with the payment balance transaction" }, "Source ID")),
+    source_type: () => (h("th", { part: tableHeadCell, scope: "col", title: "The type of the source object associated with the payment balance transaction" }, "Source Type")),
+};
+export const paymentTransactionTypes = {
+    ach_return: "ACH Return",
+    ach_return_fee: "ACH Return Fee",
+    dispute: "Dispute",
+    dispute_fee: "Dispute Fee",
+    dispute_fee_refund: "Dispute Fee Refund",
+    dispute_refund: "Dispute Refund",
+    payment: "Payment",
+    payment_fee: "Fee",
+    refund: "Refund",
+    fee_refund: "Fee Refund",
+    application_fee_returned: "Application Fee Returned",
+    refund_failure: "Refund Failure",
+    void: "Void",
+};
+export const paymentTransactionTableCells = {
+    created_at: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(balanceTransaction.created_at, { showDisplayDate: true })), h("div", { class: "fw-bold" }, convertToLocal(balanceTransaction.created_at, { showTime: true })))),
+    type: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, paymentTransactionTypes[balanceTransaction.payment_balance_txn_type])),
+    id: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, balanceTransaction.id)),
+    amount: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index), class: "text-end" }, balanceTransaction.formattedPaymentAmount(balanceTransaction.amount))),
+    balance: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index), class: "text-end" }, balanceTransaction.formattedPaymentAmount(balanceTransaction.balance))),
+    currency: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, balanceTransaction.currency)),
+    financial_transaction_id: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, balanceTransaction.financial_transaction_id)),
+    payment_id: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, balanceTransaction.payment_id)),
+    payment_balance_txn_type: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, balanceTransaction.payment_balance_txn_type)),
+    source_id: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, balanceTransaction.source_id)),
+    source_type: (balanceTransaction, index) => (h("td", { part: getAlternateTableCellPart(index) }, balanceTransaction.source_type)),
+};

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

@@ -84,7 +84,7 @@ export class PaymentsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'f86d52669c90effcd3d9d53f6de3d968c7e0e5b8' }, h("div", { key: 'c550036e844e432b64d28fd7fe126bbb4201e30d', class: "table-wrapper" }, h("table", { key: '17789379d288ad3fad03fb74b2a230563f891ebe', class: "table table-hover", part: table }, h("thead", { key: '8dbc48e378bb5f0d2bced430709156c944502dbf', class: "table-head sticky-top" }, h("tr", { key: '1d1d84f81bfe1a8f8cb7eafd9faedaed8cef5895', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: '0700177245ac7d6a6d631410957a71f259922dad', class: "table-body" }, h(TableLoadingState, { key: '055582e228ec1f955bb5a136f17801711f9fc4eb', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '061f7fed30e4c5337dc0608bf5674c5d25918348', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '9c011ecc196eb30da5b78c8b365d96af2b041a5b', 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 }, data)))), this.paging && (h("tfoot", { key: '2518be1d8d308549a1c531ff87760b279fdaeea1', class: "sticky-bottom" }, h("tr", { key: '81b14b10f51177f45b71aa5bdb39109e2b02214f', class: "table-light align-middle" }, h("td", { key: '9e61c80405503b5e1e78eb946e099d57fe9685c7', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'ce881fdc8fc0b5a1ce50eea97f9adc8237f9a880', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: '83f0460f5b465e1414e4a88dc113fc7155d4decb', class: "table-wrapper" }, h("table", { key: '2a42ee9579d589a667172ea9f97e510029b87bdf', class: "table table-hover", part: table }, h("thead", { key: 'bd4bfb3c9d022f8187925d040316020426efdc18', class: "table-head sticky-top" }, h("tr", { key: '7bc4c05aa456cef8fdf9cec435937a6ee447cf2e', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: 'c09c5a55310da7506b183914d16dd76d5336c275', class: "table-body" }, h(TableLoadingState, { key: '410e7e5b13049436d24a3d4c830c174264b4d802', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '4461a05a8812955cc9673699b9f26decbfbe3197', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'c49e3e5fadc0b889908e7420a0c3547879cc5af8', 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 }, data)))), this.paging && (h("tfoot", { key: 'f6266d84bc0ff50ed9ce7bf0af7016f48e1d57dc', class: "sticky-bottom" }, h("tr", { key: '496fe22cdbaa38becf40402425e9f507625d52b3', class: "table-light align-middle" }, h("td", { key: 'bdd620cd38377ffdcace7b7b810e0379cd089d0b', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '5dab0663b6cf408b88c43177822b01969fd0b2d5', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "payments-list-core"; }
     static get properties() {

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

@@ -43,8 +43,8 @@ export class PaymentsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '0f60343035418f02bfb4c5a334281035cc572957' }, h("table-filters-menu", { key: 'f3fbf51df04aab4de27aec6c16b1154a9c68cf89', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: 'f16d287033fcd5738a248c46f055ca880afa100d', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'c732920f08adcc06e730bc37989dfab19ab1ca70', class: "p-2" }, h("form-control-text", { key: 'd627c54541b7ef5d18047eeeb1d123974903a7b4', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: '9d0808c36388cd9e6d44ad911ce2b35c8ef3d481', class: "p-2" }, h("form-control-text", { key: '75bd80ea108dfd17260a494fb616c4b59c9a6d17', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: '67d9241d539eb9dbde85b36d2b46c03557988aac', class: "p-2" }, h("form-control-select", { key: '6cc1f7f8d660d6d7dd71231c0fadcd487dec598d', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status, disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: '286c868036528e6c0d8d57eba384a1cbf7e9fe46', class: "p-2" }, h("form-control-date", { key: '74507753f003841539d9b6c4e233428d8cdef85e', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterPaymentsListFilterParam })), h("div", { key: 'd028a802f375b553e7504dfaec3232af5b3d7849', class: "p-2" }, h("form-control-date", { key: '3f4f89061c6f50b38aaab0d950b8bd6ed53e1290', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: '10829c1f0fc63fa2f7d051d0cfecf99cfa7d5d53' }, h("table-filters-menu", { key: 'c59be37898d0eb1b6b6d19c4b338a527efcb6cc6', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: '716e807db90c39aa977e9b5daf6a411d3086ca63', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'a6f176d96dc459cc78135bdb2eab080876883c9e', class: "p-2" }, h("form-control-text", { key: '08acfb9b4d70e641a33482abfb20085ef1dfe193', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: 'bb19e9f99e3365163701450b28e008decd59596a', class: "p-2" }, h("form-control-text", { key: 'bbeec69309d93ac6dc519369fea831a37e09cff1', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: 'c4a260634c01d93cffe4106dc2d39b74ee74d1bb', class: "p-2" }, h("form-control-select", { key: 'f9bf9bea0a8de4387523379494a2ef6da763a532', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status, disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: 'b9f48f0df0007629e0046a9c001b4ed92e29e229', class: "p-2" }, h("form-control-date", { key: 'c997c468c94710e8f16bd5125092390d6444b247', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterPaymentsListFilterParam })), h("div", { key: '792715eec40293f7877377b06d97402a9befe6c9', class: "p-2" }, h("form-control-date", { key: '5a175d01c307a5273a9d41dc8c319554dc32e2e0', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: createdBeforePaymentsListFilterParam }))))));
     }
     static get is() { return "justifi-payments-list-filters"; }

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

@@ -46,7 +46,7 @@ export class PaymentsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '9abf2a388255fc2f1dd326e6c3fc3e59284a5d0e' }, h("payments-list-core", { key: '280aa7cc66e89c376f5e3169ce6bd7cda8404f70', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '97f98385d5b9f4664776f920183901136b1e3d1a' }, h("payments-list-core", { key: 'be6558d801908c60c8c0c0f66741d2ee7049d5e3', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-payments-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,7 +51,7 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '5b8398747913d6bf40b373eca65c253e8113a21d' }, this.loading && h(PayoutDetailsLoading, { key: 'e5f9584c81a01d4a10b1afd7926fae1e92f39ad8' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'c3ef47e4bd529fd0738f30780e53ecd5778106b9', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '8c0a7c9319715c66820b7fe4c4c4d231fff912aa', slot: "head-info", badge: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'f5cee7860b1d1653cb81d790e93010a407c54dcc', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '5b1ddcba3cec58cda32dd1e3e77f655c92c0b3bd', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '0413f7ef138657ed896f32bd79dc685efbabd348', title: "ID", value: this.payout.id }), h("div", { key: '18347805fab3468f464cb05886f70808d3fa8d49', class: "m-4" }, h(Button, { key: 'c3e28ed761ad89697efe2d8e311b07cafe5f4e87', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '46e2455e8aab52ff6f2ec21ab1bc5d9314e4fd9d', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '11dd28f1a0a0128481683f8c7bf703a63a37b92f', sectionTitle: "Details" }), h("div", { key: '015e5ff4c1723d5cd0e9658c9489a961b20b6bbc', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '0bb7d2722f3c2abbe9d09e8ed5e401f3dc126e1a', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'afb65e77f66f7600d8498ef2b26e13b34c8815d2', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '289d1c6b93cf7e36efc3f473f32beab31bf2897a', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '866381078c7fa406bbf5293c517f6d87d736e3c2', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '9cc27410ff9600465f4b52db6e8b70d291e48889', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'a270a06d0a9407c65a71dfe0525a547ffc7a7b76', sectionTitle: "Account" }), h("div", { key: '17b064d47baaff7d58c9b73b15b225456cbb0139', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '2f7335af4b7708901760a780a9908694ad488442', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'e3dc1e150db520f373b0e8d7faf383ea9859ba58', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'e4d213592faccb7142c781ae5da2478b2efc6a28', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '0a2beb62f2c4fa2ceff53c853706343cb8994624', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'f3e6c8f8fd7789f7d9244eecc0cf328ae5519f87', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'a35dc97c55c9fc81679a5396d79c7d0f8834dc8a', sectionTitle: 'Metadata' }), h("div", { key: '8deeab8c305bb861fa7a9a3bc1ff5aad8e8d0d48', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '318c943916f17908ead2addaebe350e949b305f0', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: '62711161d74a4d4e76ea5dba50cdf658722ba3a5' }, this.loading && h(PayoutDetailsLoading, { key: '170bf58456fb93c687a9e5b71e364ed6d54ec965' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'eafc4215df8ecba2f3e767e91df54a67c48e0e69', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '849a324f0d5f545e502c1632a5af30da3f6caf74', slot: "head-info", badge: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'ae0b4f158d3baf397880061f6fe25916ca870ac6', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '2e2f16f8c1e2f5b34fe986a311be4ae084d385ab', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '724abe3799d1a1c8f9a54130af715a2057218510', title: "ID", value: this.payout.id }), h("div", { key: '7ac70b4b6eee073384e223b01304d0ad0aaf0a64', class: "m-4" }, h(Button, { key: 'fc78f5a3b14e58aa3861592e81bc60c155d520e3', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '9ebede365566df145b3412b24d255e1b90740541', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '71cfc2676e1ac51b44de391547589fafb5189266', sectionTitle: "Details" }), h("div", { key: 'cba9946a2406c577d3b190cfbfe4b1eeaa27001e', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '1af9837addfc6fd3829fac3df8376958b7dbfbc7', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'f54690ff4578b7383feadd6420b14df1c79d398b', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '5013c67ee0ac8bd9495209fb5854a36665317d84', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '41cd7f0989ff44be01d78475e03486b2fb158911', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '6f047db81aae911ed4553fecda7baacdc5ff9209', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'b342e899b13489045a82051e563ff56c027107e8', sectionTitle: "Account" }), h("div", { key: '709be895334d0a4963ceeb762ac6e66a5a603d07', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '1e14ae8f0b329038ee2aea938be0ab4c1d2c35c9', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '54ef8f31b5dd0698d50efe617db9fbdb8a2088eb', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '3cbe4043e92bc3d2a07d2970473b06bd92e56f33', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '482efcf4498b79cf724a50dd0d3ba0f38d02576d', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '7b3b961659e263e83268e178991627d04a2fcd46', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '49b355b672f7fabe75798931e7e36bb1ccfe7370', sectionTitle: 'Metadata' }), h("div", { key: '66669969009dda1eacc194a4ad035836e5fd83c7', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '5700a8404cb548fd4c2a62fde70e56bd78ea8ac6', metadata: this.payout.metadata })))))));
     }
     static get is() { return "payout-details-core"; }
     static get properties() {

package/dist/collection/components/payout-transactions-list/payout-transactions-list.js

@@ -0,0 +1,250 @@
+import { h } from "@stencil/core";
+import { ComponentErrorCodes, ComponentErrorSeverity, pagingDefaults } from "../../api";
+import JustifiAnalytics from "../../api/Analytics";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
+import { makeGetPayoutTransactions } from "../../actions/payout/get-payout-transactions";
+import { PayoutService } from "../../api/services/payout.service";
+import { Table } from "../../utils/table";
+import { TableClickActions } from "../../ui-components/table/event-types";
+import { table, tableCell } from "../../styles/parts";
+import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
+import { defaultColumnsKeys, payoutTransactionTableCells, payoutTransactionTableColumns } from "./payout-transactions-table";
+export class PayoutTransactionsList {
+    constructor() {
+        this.balanceTransactions = [];
+        this.isLoading = true;
+        this.errorMessage = null;
+        this.paging = pagingDefaults;
+        this.pagingParams = {};
+        this.apiOrigin = PROXY_API_ORIGIN;
+        this.columns = defaultColumnsKeys;
+        this.handleClickPrevious = (beforeCursor) => {
+            this.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: TableClickActions.previous });
+        };
+        this.handleClickNext = (afterCursor) => {
+            this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: TableClickActions.next });
+        };
+        this.rowClickHandler = (e) => {
+            const clickedPayoutId = e.target.closest('tr').dataset.rowEntityId;
+            if (!clickedPayoutId)
+                return;
+            const transactionData = this.balanceTransactions.find((payout) => payout.id === clickedPayoutId);
+            this.clickEvent.emit({ name: TableClickActions.row, data: transactionData });
+        };
+    }
+    componentWillLoad() {
+        this.transactionsTable = new Table(this.balanceTransactions, this.columns, payoutTransactionTableColumns, payoutTransactionTableCells);
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+        this.initializeApi();
+    }
+    disconnectedCallback() {
+        this.analytics.cleanup();
+    }
+    propChanged() {
+        this.initializeApi();
+    }
+    handleError(code, errorMessage, severity) {
+        this.isLoading = false;
+        this.errorEvent.emit({ errorCode: code, message: errorMessage, severity });
+    }
+    initializeApi() {
+        if (this.payoutId && this.authToken) {
+            const getPayoutTransactions = makeGetPayoutTransactions({
+                authToken: this.authToken,
+                service: new PayoutService(),
+                apiOrigin: this.apiOrigin
+            });
+            getPayoutTransactions({
+                params: this.requestParams,
+                onSuccess: ({ balanceTransactions, pagingInfo }) => {
+                    this.balanceTransactions = balanceTransactions;
+                    this.paging = pagingInfo;
+                    this.transactionsTable.collectionData = this.balanceTransactions;
+                },
+                onError: ({ error, code, severity }) => {
+                    this.errorMessage = error.message;
+                    this.handleError(error, code, severity);
+                },
+                final: () => {
+                    this.isLoading = false;
+                }
+            });
+        }
+        else {
+            this.errorMessage = 'payout-id and auth-token props are required';
+            this.handleError(ComponentErrorCodes.MISSING_PROPS, this.errorMessage, ComponentErrorSeverity.ERROR);
+        }
+    }
+    get entityId() {
+        return this.balanceTransactions.map((transaction) => transaction.id);
+    }
+    get showEmptyState() {
+        return !this.isLoading && !this.errorMessage && this.transactionsTable.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.isLoading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState && !this.isLoading;
+    }
+    get requestParams() {
+        return Object.assign({ payout_id: this.payoutId, limit: '15' }, this.pagingParams);
+    }
+    render() {
+        return (h(StyledHost, { key: '90a9bdb7acbaabba3e2d99936ab8ff4af752b89f' }, h("div", { key: '546c52c26422482ebc03c363e1b7251b00628612', class: "table-wrapper" }, h("table", { key: '8cafebb253b276b747be56ffdde3430eebd8165b', class: "table table-hover", part: table }, h("thead", { key: '1b701619c17d926a95ddfb7fbb84fe3a6fd7c9b9', class: "table-head sticky-top" }, h("tr", { key: '94b5d386d8eed15eb54761c450603e3edba05e28', class: "table-light text-nowrap" }, this.transactionsTable.columnData.map((column) => column))), h("tbody", { key: 'cf4057bac5a7b9b49448bc0cc6fe60b031e71428', class: "table-body" }, h(TableLoadingState, { key: '0336b83d2842ba8cc450e6169161c5a32b65d5ca', columnSpan: this.transactionsTable.columnData.length, isLoading: this.isLoading }), h(TableEmptyState, { key: 'ecb336f7cf73ae652eafa2068e916055c908b351', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnData.length }), h(TableErrorState, { key: 'fa99aae26090ced86423af1c1458b51880299260', columnSpan: this.transactionsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'e1232dddefdbfaad0616841797235afd61422ec6', class: "sticky-bottom" }, h("tr", { key: 'f399c65e0d5c25206d2194841ba98e88d3fd7ebd', class: "table-light align-middle" }, h("td", { key: 'cb2e12c7d397c5c9be12ff2f3ad53bfba072f814', part: tableCell, colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: 'b485f5ba2817f9781f53d67b22ea3836caca448a', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+    }
+    static get is() { return "justifi-payout-transactions-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "payoutId": {
+                "type": "string",
+                "attribute": "payout-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "authToken": {
+                "type": "string",
+                "attribute": "auth-token",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "apiOrigin": {
+                "type": "string",
+                "attribute": "api-origin",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "PROXY_API_ORIGIN"
+            },
+            "columns": {
+                "type": "string",
+                "attribute": "columns",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "defaultColumnsKeys"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "balanceTransactions": {},
+            "transactionsTable": {},
+            "isLoading": {},
+            "errorMessage": {},
+            "paging": {},
+            "pagingParams": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clickEvent",
+                "name": "click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentClickEvent",
+                    "resolved": "ComponentClickEvent",
+                    "references": {
+                        "ComponentClickEvent": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentClickEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentErrorEvent",
+                    "resolved": "ComponentErrorEvent",
+                    "references": {
+                        "ComponentErrorEvent": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::ComponentErrorEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "pagingParams",
+                "methodName": "propChanged"
+            }, {
+                "propName": "payoutId",
+                "methodName": "propChanged"
+            }, {
+                "propName": "authToken",
+                "methodName": "propChanged"
+            }];
+    }
+}