@justifi/webcomponents 6.12.1-rc.5 → 6.12.2

package/dist/esm/justifi-payout-details.entry.js

@@ -1,21 +1,26 @@
-import { r as registerInstance, c as createEvent, h } from './index-CV0Pyo1O.js';
-import { P as PayoutService } from './payout.service-B6KqlDyg.js';
+import { h, r as registerInstance, c as createEvent } from './index-CV0Pyo1O.js';
+import { P as PayoutService } from './payout.service-BgFKxEoL.js';
 import './config-state-kKn89dp1.js';
 import './dinero-HXpYMWUU.js';
-import { g as Payout, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid-BMnuSHeX.js';
+import { i as Payout, C as ComponentErrorSeverity, e as ComponentErrorCodes } from './Plaid-BuKEVgbB.js';
 import './Pagination-CLHwhyvu.js';
 import './Business-BcNb9bVO.js';
 import './Dispute-BH0Xfn-F.js';
-import { g as getErrorCode, a as getErrorMessage } from './utils-DtiRLISl.js';
-import { E as ErrorState } from './utils-DJOBwFeP.js';
-import { J as JustifiAnalytics } from './Analytics-BCoK2BKE.js';
-import { m as makeGetPayoutCSV } from './get-payout-csv-Dhezo7Ty.js';
-import { c as checkPkgVersion } from './check-pkg-version-C1z6CAOx.js';
-import './Api-BrYhtpEh.js';
-import './utils-De6tr4ug.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils-DcfpJGDZ.js';
+import { h as capitalizeFirstLetter, b as formatDate, d as formatTime } from './utils-BTtxWI2r.js';
+import { a as EntityHeadInfo, b as EntityHeadInfoItem, D as DetailSectionTitle, c as DetailItem, C as CodeBlock, E as ErrorState } from './utils-BxYS3WDw.js';
+import { J as JustifiAnalytics } from './Analytics-qafLCOEU.js';
+import { m as makeGetPayoutCSV, M as MapPayoutStatusToBadge } from './payouts-status-1T2NZBoE.js';
+import { c as checkPkgVersion } from './check-pkg-version-BJtCbzf9.js';
+import { B as Button } from './button-DRdaAudE.js';
+import { S as StyledHost } from './styled-host-D6byRazK.js';
+import './event-types-CZfYo5-1.js';
+import { S as Skeleton } from './skeleton-CXGFVqDf.js';
+import { a as Badge, B as BadgeVariant } from './badge-B6dp1XGV.js';
+import './Api-DMd8hTI-.js';
 import './index-cDVGjRkU.js';
-import './parts-D50Rx76J.js';
-import './package-DbJ8_F44.js';
+import './parts-DnrawQn3.js';
+import './package-BCgsLInF.js';
 
 const makeGetPayoutDetails = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
     var _a;
@@ -46,21 +51,43 @@ const makeGetPayoutDetails = ({ id, authToken, service }) => async ({ onSuccess,
     }
 };
 
+const PayoutDetailsLoading = () => (h("div", { class: "row gap-3" }, h("div", { class: "col-12" }, h(Skeleton, { width: "35%", height: "30px" })), h("div", { class: "col-12" }, h(Skeleton, { width: "70%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "40%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "40%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "100%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "80%" }))));
+
 const JustifiPayoutDetails = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.errorEvent = createEvent(this, "error-event", 7);
+        this.recordClickEvent = createEvent(this, "record-click-event", 7);
         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;
@@ -70,6 +97,9 @@ const JustifiPayoutDetails = class {
     propChanged() {
         this.initializeServices();
     }
+    getPayoutWatcher() {
+        this.fetchData();
+    }
     initializeServices() {
         if (this.payoutId && this.authToken) {
             this.getPayout = makeGetPayoutDetails({
@@ -91,15 +121,41 @@ const JustifiPayoutDetails = class {
             });
         }
     }
+    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 watchers() { return {
         "payoutId": ["propChanged"],
-        "authToken": ["propChanged"]
+        "authToken": ["propChanged"],
+        "getPayout": ["getPayoutWatcher"]
     }; }
 };
 

package/dist/esm/justifi-payout-transactions-list.entry.js

@@ -1,23 +1,23 @@
 import { h, r as registerInstance, c as createEvent } from './index-CV0Pyo1O.js';
 import { c as configState } from './config-state-kKn89dp1.js';
 import './dinero-HXpYMWUU.js';
-import { k as PayoutBalanceTransaction, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid-BMnuSHeX.js';
+import { j as PayoutBalanceTransaction, C as ComponentErrorSeverity, e as ComponentErrorCodes } from './Plaid-BuKEVgbB.js';
 import { p as pagingDefaults } from './Pagination-CLHwhyvu.js';
 import './Business-BcNb9bVO.js';
 import './Dispute-BH0Xfn-F.js';
-import { J as JustifiAnalytics } from './Analytics-BCoK2BKE.js';
-import { c as checkPkgVersion } from './check-pkg-version-C1z6CAOx.js';
-import { g as getErrorCode, a as getErrorMessage } from './utils-DtiRLISl.js';
-import { P as PayoutService } from './payout.service-B6KqlDyg.js';
-import { T as Table, l as TableWrapper, a as TableComponent, b as TableHead, c as TableHeadRow, d as TableBody, e as TableLoadingState, f as TableEmptyState, g as TableErrorState, h as TableRow, i as TableFoot, j as TableFootRow, k as TableFootCell } from './table-Deugl8h5.js';
+import { J as JustifiAnalytics } from './Analytics-qafLCOEU.js';
+import { c as checkPkgVersion } from './check-pkg-version-BJtCbzf9.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils-DcfpJGDZ.js';
+import { P as PayoutService } from './payout.service-BgFKxEoL.js';
+import { T as Table, l as TableWrapper, a as TableComponent, b as TableHead, c as TableHeadRow, d as TableBody, e as TableLoadingState, f as TableEmptyState, g as TableErrorState, h as TableRow, i as TableFoot, j as TableFootRow, k as TableFootCell } from './table-CcyuIutB.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
 import { T as TableClickActions } from './event-types-CZfYo5-1.js';
-import { a as convertToLocal } from './utils-De6tr4ug.js';
-import { q as tableHeadCell, u as getAlternateTableCellPart } from './parts-D50Rx76J.js';
+import { a as convertToLocal } from './utils-BTtxWI2r.js';
+import { a3 as tableHeadCell, a4 as getAlternateTableCellPart } from './parts-DnrawQn3.js';
 import './index-cDVGjRkU.js';
-import './package-DbJ8_F44.js';
-import './Api-BrYhtpEh.js';
-import './spinner--fEgBBOG.js';
+import './package-BCgsLInF.js';
+import './Api-DMd8hTI-.js';
+import './spinner-kSw6PcwU.js';
 
 const makeGetPayoutTransactions = ({ accountId, authToken, service }) => async ({ params, onSuccess, onError, final }) => {
     var _a;
@@ -185,7 +185,7 @@ const JustifiPayoutTransactionsList = class {
         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 watchers() { return {
         "pagingParams": ["propChanged"],

package/dist/esm/justifi-payouts-list-filters.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, h } from './index-CV0Pyo1O.js';
 import { f as filterParams, p as propsParams, c as clearParams } from './payouts-list-params-state-CiGfmyWW.js';
-import { f as filterMenu, a as filterParam } from './parts-D50Rx76J.js';
+import { f as filterMenu, a as filterParam } from './parts-DnrawQn3.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
 import './event-types-CZfYo5-1.js';
-import { c as convertToUTC, a as convertToLocal } from './utils-De6tr4ug.js';
+import { c as convertToUTC, a as convertToLocal } from './utils-BTtxWI2r.js';
 import './config-state-kKn89dp1.js';
-import { P as PayoutStatusesSafeNames } from './Plaid-BMnuSHeX.js';
+import { P as PayoutStatusesSafeNames } from './Plaid-BuKEVgbB.js';
 import './Pagination-CLHwhyvu.js';
 import './Business-BcNb9bVO.js';
 import './Dispute-BH0Xfn-F.js';
@@ -48,8 +48,8 @@ const JustifiPayoutsListFilters = class {
     }
     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 }))))));
     }
 };

package/dist/esm/justifi-payouts-list.entry.js

@@ -1,26 +1,27 @@
-import { r as registerInstance, c as createEvent, h } from './index-CV0Pyo1O.js';
-import { g as Payout, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid-BMnuSHeX.js';
-import { J as JustifiAnalytics } from './Analytics-BCoK2BKE.js';
-import { c as checkPkgVersion } from './check-pkg-version-C1z6CAOx.js';
-import { P as PayoutService } from './payout.service-B6KqlDyg.js';
+import { h, r as registerInstance, c as createEvent } from './index-CV0Pyo1O.js';
+import { i as Payout, C as ComponentErrorSeverity, e as ComponentErrorCodes } from './Plaid-BuKEVgbB.js';
+import { J as JustifiAnalytics } from './Analytics-qafLCOEU.js';
+import { c as checkPkgVersion } from './check-pkg-version-BJtCbzf9.js';
+import { P as PayoutService } from './payout.service-BgFKxEoL.js';
 import './config-state-kKn89dp1.js';
 import './dinero-HXpYMWUU.js';
-import './Pagination-CLHwhyvu.js';
+import { p as pagingDefaults } from './Pagination-CLHwhyvu.js';
 import './Business-BcNb9bVO.js';
 import './Dispute-BH0Xfn-F.js';
-import { g as getErrorCode, a as getErrorMessage } from './utils-DtiRLISl.js';
-import { m as makeGetPayoutCSV } from './get-payout-csv-Dhezo7Ty.js';
-import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccounts-zrWoI4Bh.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils-DcfpJGDZ.js';
+import { M as MapPayoutStatusToBadge, m as makeGetPayoutCSV } from './payouts-status-1T2NZBoE.js';
+import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccounts-CgDWE_5o.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
-import './event-types-CZfYo5-1.js';
-import { d as defaultColumnsKeys } from './payouts-table-CbzI90ci.js';
-import './utils-De6tr4ug.js';
-import './package-DbJ8_F44.js';
-import './Api-BrYhtpEh.js';
+import { T as Table, l as TableWrapper, a as TableComponent, b as TableHead, c as TableHeadRow, d as TableBody, e as TableLoadingState, f as TableEmptyState, g as TableErrorState, h as TableRow, i as TableFoot, j as TableFootRow, k as TableFootCell } from './table-CcyuIutB.js';
+import { T as TableClickActions } from './event-types-CZfYo5-1.js';
+import { a as convertToLocal } from './utils-BTtxWI2r.js';
+import { a3 as tableHeadCell, a4 as getAlternateTableCellPart } from './parts-DnrawQn3.js';
+import { o as onQueryParamsChange, g as getRequestParams } from './payouts-list-params-state-CiGfmyWW.js';
+import './package-BCgsLInF.js';
+import './Api-DMd8hTI-.js';
 import './index-cDVGjRkU.js';
-import './payouts-status-CGZRMu-q.js';
-import './badge-B_DdhQ3Q.js';
-import './parts-D50Rx76J.js';
+import './badge-B6dp1XGV.js';
+import './spinner-kSw6PcwU.js';
 
 const makeGetPayouts = ({ id, authToken, service }) => async ({ params, onSuccess, onError }) => {
     var _a, _b;
@@ -51,21 +52,89 @@ const makeGetPayouts = ({ id, authToken, service }) => async ({ params, onSucces
     }
 };
 
+const defaultColumnsKeys = 'created_at,amount,status,payments_total,refunds_total,fees_total,other_total,csv';
+const payoutTableColumns = {
+    created_at: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date the payout was deposited" }, "Created")),
+    sub_account_name: () => (h("th", { part: tableHeadCell, scope: "col", title: "The sub account associated with the payout" }, "Sub Account")),
+    payments_total: () => (h("th", { part: tableHeadCell, scope: "col", title: "The total payments amount associated with the payout" }, "Payments")),
+    refunds_total: () => (h("th", { part: tableHeadCell, scope: "col", title: "The total refunds amount associated with the payout" }, "Refunds")),
+    fees_total: () => (h("th", { part: tableHeadCell, scope: "col", title: "The total fees amount associated with the payout" }, "Fees")),
+    other_total: () => (h("th", { part: tableHeadCell, scope: "col", title: "The total other amount" }, "Other")),
+    amount: () => (h("th", { part: tableHeadCell, scope: "col", title: "The total amount of the payout" }, "Amount")),
+    status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The real-time status of each payout" }, "Status")),
+    csv: () => (h("th", { part: tableHeadCell, scope: "col", title: "Export CSV" })),
+};
+const payoutTableCells = (downloadCSV) => ({
+    created_at: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(payout.created_at, { showDisplayDate: true })))),
+    sub_account_name: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.sub_account_name)),
+    payments_total: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.payments_total))),
+    refunds_total: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.refunds_total))),
+    fees_total: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.fees_total))),
+    other_total: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.other_total))),
+    amount: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.amount))),
+    status: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, MapPayoutStatusToBadge(payout.status))),
+    csv: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("a", { href: "#", onClick: (event) => { event.preventDefault(); downloadCSV(payout.id); } }, "CSV"))),
+});
+
 const JustifiPayoutsList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.errorEvent = createEvent(this, "error-event", 7);
+        this.clickEvent = createEvent(this, "click-event", 7);
         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;
@@ -75,6 +144,9 @@ const JustifiPayoutsList = class {
     propChanged() {
         this.initializeGetData();
     }
+    updateOnPropChange() {
+        this.fetchData();
+    }
     initializeGetData() {
         this.initializePayoutsServices();
         this.initializeGetSubAccounts();
@@ -107,12 +179,88 @@ const JustifiPayoutsList = class {
             });
         }
     }
+    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 watchers() { return {
         "accountId": ["propChanged"],
-        "authToken": ["propChanged"]
+        "authToken": ["propChanged"],
+        "pagingParams": ["updateOnPropChange"],
+        "getPayouts": ["updateOnPropChange"],
+        "getSubAccounts": ["updateOnPropChange"]
     }; }
 };
 

package/dist/esm/justifi-refund-payment.entry.js

@@ -1,26 +1,26 @@
 import { h, r as registerInstance, c as createEvent } from './index-CV0Pyo1O.js';
 import { c as create$3, a as create$6, F as FormController } from './index.esm-BHdVU4hV.js';
-import { f as formatCurrency } from './utils-De6tr4ug.js';
+import { f as formatCurrency } from './utils-BTtxWI2r.js';
 import './config-state-kKn89dp1.js';
-import { R as RefundReasons, C as ComponentErrorSeverity, a as ComponentErrorCodes, n as RefundPayload } from './Plaid-BMnuSHeX.js';
+import { R as RefundReasons, C as ComponentErrorSeverity, e as ComponentErrorCodes, n as RefundPayload } from './Plaid-BuKEVgbB.js';
 import './Pagination-CLHwhyvu.js';
 import './Business-BcNb9bVO.js';
 import './Dispute-BH0Xfn-F.js';
-import { B as Button } from './button-B-Agn8yQ.js';
+import { B as Button } from './button-DRdaAudE.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
 import './event-types-CZfYo5-1.js';
-import { P as PaymentService } from './payment.service-C6ebnLOw.js';
-import { m as makeGetPaymentDetails } from './get-payment-details-Br1249qD.js';
-import { J as JustifiAnalytics } from './Analytics-BCoK2BKE.js';
-import { c as checkPkgVersion } from './check-pkg-version-C1z6CAOx.js';
-import { g as getErrorCode, a as getErrorMessage } from './utils-DtiRLISl.js';
-import { A as Api } from './Api-BrYhtpEh.js';
-import { S as Skeleton } from './skeleton-DV6yJalo.js';
+import { P as PaymentService } from './payment.service-Ckbb7gXA.js';
+import { m as makeGetPaymentDetails } from './get-payment-details-DjBou5Fu.js';
+import { J as JustifiAnalytics } from './Analytics-qafLCOEU.js';
+import { c as checkPkgVersion } from './check-pkg-version-BJtCbzf9.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils-DcfpJGDZ.js';
+import { A as Api } from './Api-DMd8hTI-.js';
+import { S as Skeleton } from './skeleton-CXGFVqDf.js';
 import './_commonjsHelpers-BFTU3MAI.js';
 import './dinero-HXpYMWUU.js';
 import './index-cDVGjRkU.js';
-import './parts-D50Rx76J.js';
-import './package-DbJ8_F44.js';
+import './parts-DnrawQn3.js';
+import './package-BCgsLInF.js';
 
 const amountValidation = (maxAmount) => {
     const max = +maxAmount;

package/dist/esm/justifi-save-new-payment-method.entry.js

@@ -9,7 +9,7 @@ const JustifiSaveNewPaymentMethod = class {
         this.label = 'Save New Payment Method';
     }
     render() {
-        return (h(StyledHost, { key: '9a8f3c570df476801a903c8591ad955c6e20bdcf' }, h("save-new-payment-method", { key: 'c5651023d045273b885df866ac0532d80db429aa', label: this.label, hidden: this.hidden, onCheckboxChanged: (e) => this.checkboxChanged.emit(e.detail) })));
+        return (h(StyledHost, { key: 'b3a21f76759593ab02d71ed9a708982bdad5f0c3' }, h("save-new-payment-method", { key: 'ce0aa2bb711293144c835e9779b39a122017b544', label: this.label, hidden: this.hidden, onCheckboxChanged: (e) => this.checkboxChanged.emit(e.detail) })));
     }
 };
 

package/dist/esm/justifi-saved-payment-method.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-CV0Pyo1O.js';
 import { C as CardBrandLabels } from './payment-method-option-utils-lUHAQVFl.js';
-import { r as radioListItem } from './parts-D50Rx76J.js';
+import { r as radioListItem } from './parts-DnrawQn3.js';
 import './dinero-HXpYMWUU.js';
 
 const JustifiSavedPaymentMethod = class {
@@ -22,7 +22,7 @@ const JustifiSavedPaymentMethod = class {
     ;
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'e344ee9a3ca002fa7b1685991db6fc947b1ab740', class: "payment-method" }, h("div", { key: '6e0c985161d5e7e8dc381d7171df9b70a25d007b', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '826c54a61730d9e55f14da3ef6f7b7dea897e036', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
+        return (h(Host, { key: '66b8725a684241fc105d182ee5982167b2007506', class: "payment-method" }, h("div", { key: 'd0370f70b880f6a83b18eaeeefce7b8fde342ce9', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '76ed425815f77082ba1145aa2df04beef6044e07', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
     }
 };
 

package/dist/esm/justifi-season-interruption-insurance.entry.js

@@ -1,22 +1,22 @@
 import { h, r as registerInstance, c as createEvent } from './index-CV0Pyo1O.js';
-import { A as Api } from './Api-BrYhtpEh.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid-BMnuSHeX.js';
+import { A as Api } from './Api-DMd8hTI-.js';
+import { C as ComponentErrorSeverity, e as ComponentErrorCodes } from './Plaid-BuKEVgbB.js';
 import './Pagination-CLHwhyvu.js';
 import './Business-BcNb9bVO.js';
 import './Dispute-BH0Xfn-F.js';
-import { g as getErrorCode, a as getErrorMessage } from './utils-DtiRLISl.js';
-import { J as JustifiAnalytics } from './Analytics-BCoK2BKE.js';
-import { c as checkPkgVersion } from './check-pkg-version-C1z6CAOx.js';
-import { c as checkoutStore } from './checkout.store-C1TdhFf6.js';
-import { p as processHTML, f as formatCurrency, r as removeAttribute, k as addAttribute } from './utils-De6tr4ug.js';
-import { v as validateInsuranceValues, i as insuranceValues, a as insuranceErrors, H as Header2 } from './insurance-state-obAKb1XR.js';
-import { t as text, B as textDanger } from './parts-D50Rx76J.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils-DcfpJGDZ.js';
+import { J as JustifiAnalytics } from './Analytics-qafLCOEU.js';
+import { c as checkPkgVersion } from './check-pkg-version-BJtCbzf9.js';
+import { c as checkoutStore } from './checkout.store-DFnkcDZ8.js';
+import { p as processHTML, f as formatCurrency, r as removeAttribute, j as addAttribute } from './utils-BTtxWI2r.js';
+import { v as validateInsuranceValues, i as insuranceValues, a as insuranceErrors, H as Header2 } from './insurance-state-qTdpe84i.js';
+import { t as text, z as textDanger } from './parts-DnrawQn3.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
 import './event-types-CZfYo5-1.js';
-import { S as Skeleton } from './skeleton-DV6yJalo.js';
+import { S as Skeleton } from './skeleton-CXGFVqDf.js';
 import './config-state-kKn89dp1.js';
 import './index-cDVGjRkU.js';
-import './package-DbJ8_F44.js';
+import './package-BCgsLInF.js';
 import './index-DkoufM1t.js';
 import './dinero-HXpYMWUU.js';
 

package/dist/esm/justifi-skeleton.entry.js

@@ -1,14 +1,14 @@
 import { r as registerInstance, h } from './index-CV0Pyo1O.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
-import { S as Skeleton } from './skeleton-DV6yJalo.js';
-import './parts-D50Rx76J.js';
+import { S as Skeleton } from './skeleton-CXGFVqDf.js';
+import './parts-DnrawQn3.js';
 
 const JustifiSkeleton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(StyledHost, { key: 'aae82594ed1833982d7bb06ea0808e56e06b11f8' }, h(Skeleton, { key: '52c5680b1dc298b75646e5409b9c5c5b83f53eae', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
+        return (h(StyledHost, { key: 'd19fcf55df4b5b001d31af93c263fef39fc0d160' }, h(Skeleton, { key: '9ab49d76aa71146287fff2013050e008342f0275', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
     }
 };