@justifi/webcomponents 6.12.1-rc.5 → 6.12.2

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

@@ -1,24 +1,48 @@
 import { h } from "@stencil/core";
 import { PayoutService } from "../../api/services/payout.service";
 import { makeGetPayoutDetails } from "../../actions/payout/get-payout-details";
-import { ErrorState } from "../../ui-components/details/utils";
+import { capitalizeFirstLetter, formatDate, formatTime } from "../../utils/utils";
+import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState } from "../../ui-components/details/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { makeGetPayoutCSV } from "./get-payout-csv";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
+import { Button, StyledHost } from "../../ui-components";
+import { MapPayoutStatusToBadge } from "../payouts-list/payouts-status";
+import PayoutDetailsLoading from "./payout-details-loading";
+import { Badge, BadgeVariant } from "../../ui-components/badge/badge";
 export class JustifiPayoutDetails {
     constructor() {
         this.enableRecordClick = false;
+        this.loading = true;
         this.errorMessage = null;
-        this.handleErrorEvent = (event) => {
-            this.errorMessage = event.detail.message;
-            this.errorEvent.emit(event.detail);
+        this.downloadCSV = () => {
+            this.getPayoutCSV({
+                payoutId: this.payout.id,
+                onError: ({ error, code, severity }) => {
+                    this.errorMessage = error;
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity,
+                    });
+                },
+            });
+        };
+        this.handleRecordClick = (id) => {
+            this.recordClickEvent.emit({
+                id,
+                type: 'account'
+            });
         };
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeServices();
+        if (this.getPayout) {
+            this.fetchData();
+        }
     }
     disconnectedCallback() {
         var _a;
@@ -28,6 +52,9 @@ export class JustifiPayoutDetails {
     propChanged() {
         this.initializeServices();
     }
+    getPayoutWatcher() {
+        this.fetchData();
+    }
     initializeServices() {
         if (this.payoutId && this.authToken) {
             this.getPayout = makeGetPayoutDetails({
@@ -49,11 +76,36 @@ export class JustifiPayoutDetails {
             });
         }
     }
+    fetchData() {
+        this.loading = true;
+        this.getPayout({
+            onSuccess: (payout) => {
+                this.errorMessage = null;
+                this.payout = payout;
+                this.loading = false;
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    message: error,
+                    errorCode: code,
+                    severity,
+                });
+                this.loading = false;
+            },
+        });
+    }
+    formatMethod(deliveryMethod) {
+        if (deliveryMethod === "ach")
+            return "ACH";
+        return capitalizeFirstLetter(deliveryMethod);
+    }
     render() {
-        if (this.errorMessage) {
-            return ErrorState(this.errorMessage);
-        }
-        return (h("payout-details-core", { getPayout: this.getPayout, getPayoutCSV: this.getPayoutCSV, "onError-event": this.handleErrorEvent, enableRecordClick: this.enableRecordClick }));
+        var _a;
+        return (h(StyledHost, { key: '83a5916c440ac2cc4efe216dd175c8816e23c815' }, this.loading && h(PayoutDetailsLoading, { key: 'd11ad391a3eaacc5dd6a9a0303d80f496955d369' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'a3be08ef5ad0882ec4a611aa597b0b69914cb560', errorMessage: this.errorMessage }, h(EntityHeadInfo, { key: '4cea018e82c69b391a5dfc326d0ebb2aac43bcee', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), this.payout.settlement_priority === 'expedited' ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : (h(Badge, { variant: BadgeVariant.SECONDARY, title: "Standard", text: "Standard" })))), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: '4f44184dcdf1313048d9a2ee5c9be928c1a2b5ef', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'd6042bde890fcd4b8ff63856d53debf289ab6d2d', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '2866ed7c297a0815bad29bfca699893ead3af6ca', title: "ID", value: this.payout.id }), h("div", { key: '1a7a105da3b0297f90c9a33fe76aa650c9c5aaa0', class: "m-4" }, h(Button, { key: '31d8cb414516d5b4244179e6e905cb0d6f4499fa', variant: "outline-secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '1c1c4896b3f2a0c463880c082fdb43fdd6996de3', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '481c8f87d29ba4583a40370415fd6f144a601462', sectionTitle: "Details" }), h("div", { key: '2f0f38440296dc01dee0fefab2b7f6a1bd04e4bf', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: 'd8fe26cee63860bc4e02ffad0e64834ea888d8e3', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'd4a94c5ad5a78c41d314377316ce71db24b79db5', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'fea138338da1c74d26dacfeaa15642962346658c', title: "Payout Method", value: this.formatMethod(this.payout.delivery_method) }), h(DetailItem, { key: 'f77701ef18590ed73431614f421b9d76a9b83da6', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: 'af2401b0ad8b35f55283d74eae20fdf7ceea0b82', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '96801f26f15e665e856262f65c0c6cea6f92bd9a', sectionTitle: "Account" }), h("div", { key: '54578f116a6b23c5c1dce11d450eb18be304ab65', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: 'fa8ab204001e4be0cf2aa71fa2f955532f1ac81c', title: "ID", value: this.payout.account_id, onClick: this.enableRecordClick ? () => this.handleRecordClick(this.payout.account_id) : undefined }), h(DetailItem, { key: 'a0e1afcd7e7d86afb500cf876b7b61e74183f4c9', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '6b78025d11ac562f6950f07d3dc8e5c4041a236f', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '93f4f6d947d1b621de0b1d2a24dbcf83e9c909ef', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'cbe9a97153516dd2cbf6af4337179652d0f834ac', title: "Account Number", value: `**** ${this.payout.bank_account.account_number_last4}` })), this.payout.metadata && [
+            h(DetailSectionTitle, { key: '706f2d164a736fb80a8c91018f61e7667eb12be6', sectionTitle: 'Metadata' }),
+            h("div", { key: '5be03b700c79d747899db7d9bee8a060c5de7894', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '8dc3aa6522c59f7a5739eda61354bb1ac58ee3ac', metadata: this.payout.metadata }))
+        ])))));
     }
     static get is() { return "justifi-payout-details"; }
     static get encapsulation() { return "shadow"; }
@@ -123,6 +175,8 @@ export class JustifiPayoutDetails {
         return {
             "getPayout": {},
             "getPayoutCSV": {},
+            "payout": {},
+            "loading": {},
             "errorMessage": {}
         };
     }
@@ -148,6 +202,27 @@ export class JustifiPayoutDetails {
                         }
                     }
                 }
+            }, {
+                "method": "recordClickEvent",
+                "name": "record-click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "RecordClickEvent",
+                    "resolved": "RecordClickEvent",
+                    "references": {
+                        "RecordClickEvent": {
+                            "location": "import",
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::RecordClickEvent"
+                        }
+                    }
+                }
             }];
     }
     static get watchers() {
@@ -157,6 +232,9 @@ export class JustifiPayoutDetails {
             }, {
                 "propName": "authToken",
                 "methodName": "propChanged"
+            }, {
+                "propName": "getPayout",
+                "methodName": "getPayoutWatcher"
             }];
     }
 }

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

@@ -95,7 +95,7 @@ export class JustifiPayoutTransactionsList {
         return Object.assign({ payout_id: this.payoutId, limit: '15' }, this.pagingParams);
     }
     render() {
-        return (h(StyledHost, { key: '11a6336fb75a4286c102b935c7b175ce69c21521' }, h(TableWrapper, { key: '86f55e7840af3698d87965f638d7871d894110ec' }, h(TableComponent, { key: '2551d91ac0085cb5c0b15de9b3929b3dea004645' }, h(TableHead, { key: '97b793a3fb5f076618566253298bf315b67f0cdd' }, h(TableHeadRow, { key: '817fa7f9950e56a76661e8ff987c5c7035244907' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '367eb4f20acc3dc9a59dfb0389f296d687380e1b' }, h(TableLoadingState, { key: '594684a6762fd79fc797b195d5f6d296e893fd10', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '19b8983d2ea0c4a9fba4f44b404bd6901cc62137', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '552c7c8291dde9f2a4fe0d15a999d077ef663c8f', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '4486862a5aaa488014414e586d5f77d03ba7176c' }, h(TableFootRow, { key: '27a019583305eea31f402a8b3655686370f93c66' }, h(TableFootCell, { key: '6f42b298a2b2f8a5eeac49cd5bf4ca944d0be8a3', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: 'c62634fb0f4b18c07334b99a9c083f398e8c2ecc', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: '6bcc0b4af31b1b1481caa3a2ea58f21e961b4777' }, h(TableWrapper, { key: '506239f8d1f08007c93d09b35973e773447b95f0' }, h(TableComponent, { key: 'ab46955207d861620abb1fe328ba8eb47bf6912e' }, h(TableHead, { key: 'b7c20c0d180e208a8a8d585751180be5f979c4a8' }, h(TableHeadRow, { key: '6f47150a981f137cb3633437744b36e6c9b1f3f0' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: 'eb7912643fe3a3d9f66a2becbb130ba8a1a33127' }, h(TableLoadingState, { key: 'c2f95846f4c90535695ebce26c82b90b3ae022fe', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '93c2764401380a7dad07907c9f264d991f0b8e9d', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '2ab2bcc9f9d2768a17a6e511d0ecf7a24a2ca4b1', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'd5c76e1db68cebd0acac42f607a7602db3ab967a' }, h(TableFootRow, { key: '28d6eed555117e50a852c899085b634ba1ff1ccb' }, h(TableFootCell, { key: 'b4eceba9f0a705ee8824aeb313b1505752b9a53e', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: 'ba042ec0410830443db71fbeb8d90162ce761996', 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"; }

package/dist/collection/components/payouts-list/justifi-payouts-list-filters.js

@@ -39,8 +39,8 @@ export class JustifiPayoutsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: 'd3bc9678b5a917f90f77797f2812774e344661ca' }, h("table-filters-menu", { key: '43b3edf9649083af410db0eeff26f03b04c8ba2e', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: '1c0a6dea3fda9cebd921763a80077c1a8ffae110', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '59b1e4bbad4ae8e6f7a4229b1955599dc5c75da6', class: "p-2" }, h("form-control-select", { key: '05d9f42aba49452661cd0be0a0023917ef580112', name: "status", label: "Status", options: this.statusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.status || filterParams.status || '', disabled: !!this.status, part: filterParam })), h("div", { key: '231fa8934abaa002ca7bb45cd1ef9bd6520802a8', class: "p-2" }, h("form-control-date", { key: '707552858fbb3dfb07b4f68558cee0c2c6d16d31', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDate: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDate: true }), disabled: !!this.createdAfter, part: filterParam })), h("div", { key: 'a71fc710171d9a75ebbc05be361b1b3416929dc5', class: "p-2" }, h("form-control-date", { key: 'de614ef74fb2e8d3ea1ad1f187513e9004d81e40', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDate: true }) ||
+        return (h(StyledHost, { key: 'cae6be7a9441ff6024548135f66a73694c53b10b' }, h("table-filters-menu", { key: 'a419bb5344248f9a857a9b21800c482a983e68e8', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: 'ee4aa221a245a63e181d9f1e31a0b120cbe4ff2c', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '32ba66ccea590b297d27ec734c6e6b3da1d7ae0f', class: "p-2" }, h("form-control-select", { key: 'ff480f5fc8d38d0240d952b1cd689d4f5776e35d', name: "status", label: "Status", options: this.statusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.status || filterParams.status || '', disabled: !!this.status, part: filterParam })), h("div", { key: '3b3de6360d735ac8399d2e16538a00aa5736a6c1', class: "p-2" }, h("form-control-date", { key: 'f3f9fe5154fdf1d98becdcd4c8ed5a0099c8aa76', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDate: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDate: true }), disabled: !!this.createdAfter, part: filterParam })), h("div", { key: '0e95676650aba436b67f9e0537a5f3467015c9e5', class: "p-2" }, h("form-control-date", { key: '6aafa1c4d7cc1921559de295e3213307cc34ed54', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDate: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDate: true }), disabled: !!this.createdBefore, part: filterParam }))))));
     }
     static get is() { return "justifi-payouts-list-filters"; }

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

@@ -6,22 +6,69 @@ import { PayoutService } from "../../api/services/payout.service";
 import { makeGetPayouts } from "../../actions/payout/get-payouts";
 import { makeGetPayoutCSV } from "../payout-details/get-payout-csv";
 import { SubAccountService } from "../../api/services/subaccounts.service";
-import { StyledHost } from "../../ui-components";
-import { defaultColumnsKeys } from "./payouts-table";
+import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
+import { defaultColumnsKeys, payoutTableCells, payoutTableColumns } from "./payouts-table";
 import { makeGetSubAccounts } from "../../actions/sub-account/get-subaccounts";
+import { pagingDefaults } from "../../api";
+import { Table } from "../../utils/table";
+import { getRequestParams, onQueryParamsChange } from "./payouts-list-params-state";
+import { TableWrapper, TableComponent, TableHead, TableHeadRow, TableBody, TableRow, TableFoot, TableFootRow, TableFootCell, TableClickActions } from "../../ui-components";
 export class JustifiPayoutsList {
     constructor() {
         this.errorMessage = null;
+        this.payouts = [];
+        this.subAccounts = [];
+        this.loading = true;
+        this.paging = pagingDefaults;
+        this.pagingParams = {};
         this.columns = defaultColumnsKeys;
-        this.handleOnError = (event) => {
-            this.errorMessage = event.detail.message;
-            this.errorEvent.emit(event.detail);
+        this.downloadCSV = (payoutId) => {
+            this.getPayoutCSV({
+                payoutId,
+                onError: () => {
+                    this.errorEvent.emit({
+                        errorCode: ComponentErrorCodes.FETCH_ERROR,
+                        message: 'Failed to download CSV',
+                        severity: ComponentErrorSeverity.ERROR,
+                    });
+                },
+            });
+        };
+        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 clickedRow = e.target.closest('tr');
+            const clickedPayoutID = clickedRow.dataset.rowEntityId;
+            if (!clickedPayoutID)
+                return;
+            const clickedCSV = clickedRow.querySelector('a');
+            if (clickedCSV === e.target)
+                return;
+            const payoutData = this.payouts.find((payout) => payout.id === clickedPayoutID);
+            this.clickEvent.emit({ name: TableClickActions.row, data: payoutData });
         };
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeGetData();
+        this.payoutsTable = new Table(this.payouts, this.columns, payoutTableColumns, payoutTableCells(this.downloadCSV));
+        if (this.getPayouts && this.getSubAccounts) {
+            this.fetchData();
+        }
+        onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+        });
+        onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
     disconnectedCallback() {
         var _a;
@@ -31,6 +78,9 @@ export class JustifiPayoutsList {
     propChanged() {
         this.initializeGetData();
     }
+    updateOnPropChange() {
+        this.fetchData();
+    }
     initializeGetData() {
         this.initializePayoutsServices();
         this.initializeGetSubAccounts();
@@ -63,8 +113,81 @@ export class JustifiPayoutsList {
             });
         }
     }
+    fetchData() {
+        this.loading = true;
+        this.getPayouts({
+            params: this.payoutParams,
+            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 }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+                this.loading = false;
+            },
+        });
+    }
+    get payoutParams() {
+        const requestParams = getRequestParams();
+        const params = Object.assign(Object.assign({}, requestParams), this.pagingParams);
+        return params;
+    }
+    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 showEmptyState() {
+        return !this.loading && !this.errorMessage && this.payoutsTable.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState && !this.loading;
+    }
     render() {
-        return (h(StyledHost, { key: 'ace7ca040d083e78d57aac9dd2f5608b1e628cc3' }, h("payouts-list-core", { key: '9144e309536ce9e8d8330576a441eaf090a12650', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
+        return (h(StyledHost, { key: '1307a34cfcaf42f829d28b18d893dd5c55aadaa3' }, h(TableWrapper, { key: '481cd3ce90a935edc54286bd732547593c41ffed' }, h(TableComponent, { key: 'd8309908dd108ab194213c76b13d508bf41a3f6c' }, h(TableHead, { key: '8c70c0061a8dc486639c7fa43825076b04aebe5b' }, h(TableHeadRow, { key: '0a53aa8c15efe99cfdbeb458bafaa8a25a10ee62' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'c998709519b531686f24ff02d0560b7a000fbdcd' }, h(TableLoadingState, { key: '2848b295a5483417fe8568b2e7d61803726310be', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '281a9cbf369914b60d37c54ab351d5cc7865f723', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'c7709f1546a4918b691ec3661903b00167145060', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '72682c5570fae84c4128268f734d96206f234774' }, h(TableFootRow, { key: 'd391fc3195afc66336d966fb56057f9e89eda3de' }, h(TableFootCell, { key: '3403c09520cb0847d1635e6b862eab6563fb7113', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '4d5d70bab5169ddf181c5216a7e4551356e9fc15', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "justifi-payouts-list"; }
     static get encapsulation() { return "shadow"; }
@@ -135,7 +258,13 @@ export class JustifiPayoutsList {
             "getPayouts": {},
             "getPayoutCSV": {},
             "getSubAccounts": {},
-            "errorMessage": {}
+            "errorMessage": {},
+            "payouts": {},
+            "payoutsTable": {},
+            "subAccounts": {},
+            "loading": {},
+            "paging": {},
+            "pagingParams": {}
         };
     }
     static get events() {
@@ -160,6 +289,27 @@ export class JustifiPayoutsList {
                         }
                     }
                 }
+            }, {
+                "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/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentClickEvent"
+                        }
+                    }
+                }
             }];
     }
     static get watchers() {
@@ -169,6 +319,15 @@ export class JustifiPayoutsList {
             }, {
                 "propName": "authToken",
                 "methodName": "propChanged"
+            }, {
+                "propName": "pagingParams",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "getPayouts",
+                "methodName": "updateOnPropChange"
+            }, {
+                "propName": "getSubAccounts",
+                "methodName": "updateOnPropChange"
             }];
     }
 }

package/dist/collection/components/terminal-orders-list/justifi-terminal-orders-list-filters.js

@@ -50,9 +50,9 @@ export class JustifiTerminalOrdersListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: 'f53f07d2485906f350626bb2d607a03f1886d171' }, h("table-filters-menu", { key: '0530f16e6483f0129c687f3baee2e96318fd1124', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: '8d0db1dbb3bb4c72b960e885b14c32e5e96ad803', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '89e2d935209ca54d61803d405298a26483573cec', class: "p-2" }, h("form-control-select", { key: '54c0e848ef9f8ba3b78647ad78fb1c06a95fd70b', name: "order_status", label: "Order Status", options: this.terminalOrderStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderStatus || filterParams.order_status || '', disabled: !!this.orderStatus, part: filterParam })), h("div", { key: '9c2699b57a792975e380f5eb8b4c7b932ed56ad7', class: "p-2" }, h("form-control-select", { key: '39f5ce01e1d0c1312b52f10616abafd4dd0351ce', name: "order_type", label: "Order Type", options: this.terminalOrderTypeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderType || filterParams.order_type || '', disabled: !!this.orderType, part: filterParam })), h("div", { key: '2bda49183fe0f5c4eb21cf88d60851f3abf829e3', class: "p-2" }, h("form-control-date", { key: '5452ac8632f18ed59b5ca9882d530230f1340433', 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: filterParam })), h("div", { key: 'cd829f44be8958025910cb5ee4109cb6f366aa0c', class: "p-2" }, h("form-control-date", { key: 'b9a0c3edca8fd798b574c54b2f5759db2f67de84', 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: filterParam })), h("div", { key: 'bdd5b48bd4133edc6c7ed00d881579086576c801', class: "p-2" }, h("form-control-text", { key: '1e20ee3d4b771e8381005a304d61e6064a496271', name: "company_name", label: "Company Name", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.companyName || filterParams.company_name, disabled: !!this.companyName, part: filterParam }))))));
+        return (h(StyledHost, { key: 'cc09bb58c13ab0b26d92eb164cf6bc43a3c96c63' }, h("table-filters-menu", { key: '08369c471d891184e36dd6c5aae8842e0df5c01a', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: 'addd8a1cf74ae9e80cc8e4374a36400204c81400', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'b74cf4d1d13a0a6250000c8f7f0845f4c907e488', class: "p-2" }, h("form-control-select", { key: 'b1b060b64f67695bb395488fa23dcbf6373b419b', name: "order_status", label: "Order Status", options: this.terminalOrderStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderStatus || filterParams.order_status || '', disabled: !!this.orderStatus, part: filterParam })), h("div", { key: 'a3c06691181d01d6a664016b4add0784b23ab06c', class: "p-2" }, h("form-control-select", { key: '376039e2f10fbcc9ed008611d4976cf6412c16a4', name: "order_type", label: "Order Type", options: this.terminalOrderTypeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.orderType || filterParams.order_type || '', disabled: !!this.orderType, part: filterParam })), h("div", { key: 'f03c94412b7861d255dfdef98a4c2fad14e96cfa', class: "p-2" }, h("form-control-date", { key: 'd7588c4ecda9480881e0f67e0418b1e475db188c', 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: filterParam })), h("div", { key: '76f0cee7430e846a479478c903d892ac05490787', class: "p-2" }, h("form-control-date", { key: 'ce0f99ebfa8a82111689ae6ee4cc1d8bd141d657', 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: filterParam })), h("div", { key: '5c06fefb50c8c987a8e55623cba70a39cc64bbe1', class: "p-2" }, h("form-control-text", { key: '0a24516bbf665784e5c13a16b0b38be2bafb684b', name: "company_name", label: "Company Name", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.companyName || filterParams.company_name, disabled: !!this.companyName, part: filterParam }))))));
     }
     static get is() { return "justifi-terminal-orders-list-filters"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/terminal-orders-list/justifi-terminal-orders-list.js

@@ -43,7 +43,7 @@ export class JustifiTerminalOrdersList {
         }
     }
     render() {
-        return (h(StyledHost, { key: 'f505fd0cb18cae37cf0896883acd93212c45cc88' }, h("terminal-orders-list-core", { key: '2eaf2c82b43a0fd8106b8ccfe76ebcdef01f75e8', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '65330929a53f4e5e07177541460ccce864edd3ec' }, h("terminal-orders-list-core", { key: '79d4bc028395ede9b9f2e2c12729cc20532ef251', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-terminal-orders-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/terminal-orders-list/terminal-orders-list-core.js

@@ -81,7 +81,7 @@ export class TerminalOrdersListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: 'e515fe632488abfd755515d04a4bc8c481cb9083' }, h(TableComponent, { key: 'a15495309f335656cfbb1c518bb9d95eda2af86b' }, h(TableHead, { key: 'a6f2bcfa3b981d244a640f3a2ced4fb98aa04774' }, h(TableHeadRow, { key: 'cf2ec3f36d53566f7fc4aadbd79d357ac1267f94' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: '927ee10502d41c18b6950e447f3352edf765fdc9' }, h(TableLoadingState, { key: '94c51d3ed02b72068b0bed02f0e1bb69024fffaf', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a0e9d76f1340ddd33009d46682243863ff0509b2', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: '7f209a130ebf67d59e6f4b9719225c1b087f44f5', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalOrdersTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '1c714b7fe310a70b74f254eb36b126d3623b499a' }, h(TableFootRow, { key: '46d0b99409bd8611d7c1fb564aeaa236736a7947' }, h(TableFootCell, { key: '55215a040d58a64196013e0e831c35e1ccbb3309', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: 'a75512753bf06cfc6e1595ea8ed2e2081d06c3f9', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '92fffc2d98e3a5176d80decaeddc8d3b0babca74' }, h(TableComponent, { key: '9a690f1298358fd1f22942cce38a99b157526d2a' }, h(TableHead, { key: '53275af95435cbc3fa01753e88ab6a9319aa678b' }, h(TableHeadRow, { key: '374db48f613bddaad4308e60700c1ea66a5c54dd' }, this.terminalOrdersTable.columnData.map((column) => column))), h(TableBody, { key: '8e95036b34d7ed6712d64978923459b29c11fab8' }, h(TableLoadingState, { key: 'bf28d8b020cfc59f494eede313f9cb38265d702f', columnSpan: this.terminalOrdersTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '0361d8c68151065fe96a97a137aa06b510d2f2dd', isEmpty: this.showEmptyState, columnSpan: this.terminalOrdersTable.columnKeys.length }), h(TableErrorState, { key: 'b7bbf34d9c90f1757424afb9fa30617f61a4d564', columnSpan: this.terminalOrdersTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalOrdersTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'a0b4a423809b3b36211b7f59719642e48311d32e' }, h(TableFootRow, { key: '81a3dd146e0931f14ef6972e42f71b38c2f11239' }, h(TableFootCell, { key: '8e4afc9ea974aac2c693a60e3e0ea5f9915a199e', colSpan: this.terminalOrdersTable.columnData.length }, h("pagination-menu", { key: '9d5afd8b9a09fc24f12c701e289c22a40ad77042', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "terminal-orders-list-core"; }
     static get properties() {

package/dist/collection/components/terminals-list/justifi-terminals-list-filters.js

@@ -45,7 +45,7 @@ export class JustifiTerminalsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '4b6ba70d8a8581d78facb0a2f262c7f11baf971b' }, h("table-filters-menu", { key: '38f0bfb11c9887a612c3dba55ae22fc3848e16ea', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: 'b9ba8adf4e258310bb5c250c4d47d10157101007', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'd6c3a5b11c0def890980eacac4690accd73abf68', class: "p-2" }, h("form-control-text", { key: 'e3657ae3f8a875a865a66e652ecf7ea86f3e768e', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: filterParam })), h("div", { key: '5991ea46b3e887bd600041ed1cc6dd522adb92c2', class: "p-2" }, h("form-control-text", { key: '36a007337309b04d89f4754b07ffb535e8806033', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: filterParam })), h("div", { key: '6089e2751f0fadc14b899510972b00eb7b1cf3cd', class: "p-2" }, h("form-control-text", { key: '430eeeeb1adfdc50f83b35fa662d08b7387ee699', name: "provider_id", label: "Device ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.providerId || filterParams.provider_id, disabled: !!this.providerId, part: filterParam })), h("div", { key: 'e82b272ebcd175a68a39b19acc033213422ee07f', class: "p-2" }, h("form-control-text", { key: '38829262c19e3281e3c0e96d6287d35ed4110f75', name: "serial_number", label: "Serial Number", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.serialNumber || filterParams.serial_number, disabled: !!this.serialNumber, part: filterParam })), h("div", { key: 'fcdb9be89ea287c91bcd1ca64bb81adae03912ff', class: "p-2" }, h("form-control-select", { key: '0555fdc74f33ce2589de7e7695256c15e4f21ed5', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status || '', disabled: !!this.terminalStatus, part: filterParam })), h("div", { key: '9bdb42ed941298a2b4f42f85cec7469c3dba7301', class: "p-2" }, h("form-control-date", { key: '8366403642c6394822c324b249307760a7ba2b1c', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter || filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: filterParam })), h("div", { key: 'd1a02ac27ede585547d29082d41b7dab30e1bf04', class: "p-2" }, h("form-control-date", { key: '62b86c28b87a179dbd3ad8a85d9d2eb3d06fff9c', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore || filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: filterParam }))))));
+        return (h(StyledHost, { key: '77a3937540cd75a7cc51a90b1cd7c7c52ae870b2' }, h("table-filters-menu", { key: '4a725bfe0b79d0046eea2f7b3e3fe295b5384b94', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: '0cb6fcedf45371c68b8b37e8b832ca3e9b48789e', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '602fc95acdd62112bc53f858073e936f9bf5e48d', class: "p-2" }, h("form-control-text", { key: 'c4e8dc476d2d8d80f2367ab6f8a5e5db17a72f15', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: filterParam })), h("div", { key: 'e83b3b3ef5f1509286cabaee9faeb96cd7d9e15a', class: "p-2" }, h("form-control-text", { key: '2f6eb9224740f327ce5019d93d879c231df8b0ee', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: filterParam })), h("div", { key: '942179e72ce3b8fea5c2cd2dd28aeecd586bdb6c', class: "p-2" }, h("form-control-text", { key: 'adb7eaab71834c2c619a09f9053dd8374a8bdfcc', name: "provider_id", label: "Device ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.providerId || filterParams.provider_id, disabled: !!this.providerId, part: filterParam })), h("div", { key: 'c15d630d0c3500d26720db63cbf90098b837ee24', class: "p-2" }, h("form-control-text", { key: '93f4e6c1e5c8f7e853111e74e25946fd683c5a17', name: "serial_number", label: "Serial Number", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.serialNumber || filterParams.serial_number, disabled: !!this.serialNumber, part: filterParam })), h("div", { key: '6a269a0c2fb90fb4e00b05d4aeee3fff4ab4e967', class: "p-2" }, h("form-control-select", { key: 'f6d9e45354d5c3d8894fe442d0bef490bafb20de', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status || '', disabled: !!this.terminalStatus, part: filterParam })), h("div", { key: 'ea70b109bd231bd085bb2cb8388d8010e0c5aa79', class: "p-2" }, h("form-control-date", { key: '256cddfb0e68590bc8d8403aa8a033ad40d613fe', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter || filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: filterParam })), h("div", { key: '1be9bf8d68c691f09d40db9c45d78ed923fb3d86', class: "p-2" }, h("form-control-date", { key: '79d48b277064373e3faf999ae8771a44b35de1cb', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore || filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: filterParam }))))));
     }
     static get is() { return "justifi-terminals-list-filters"; }
     static get encapsulation() { return "shadow"; }