@justifi/webcomponents 6.12.1-rc.5 → 6.12.1

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

@@ -1,9 +1,9 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import { P as PaymentService } from './payment.service.js';
 import './config-state.js';
 import './dinero.js';
 import { e as Payment, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid.js';
-import './Pagination.js';
+import { p as pagingDefaults } from './Pagination.js';
 import './Business.js';
 import './ApplePay.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils3.js';
@@ -11,10 +11,14 @@ import { J as JustifiAnalytics } from './Analytics.js';
 import { c as checkPkgVersion } from './check-pkg-version.js';
 import { S as StyledHost } from './styled-host.js';
 import './justifi-details2.js';
-import './event-types.js';
+import { T as Table, a as TableWrapper, b as TableComponent, c as TableHead, d as TableHeadRow, e as TableBody, f as TableLoadingState, g as TableEmptyState, h as TableErrorState, i as TableRow, j as TableFoot, k as TableFootRow, l as TableFootCell } from './table.js';
+import { T as TableClickActions } from './event-types.js';
 import './justifi-radio-list-item2.js';
-import { d as defineCustomElement$2, a as defaultColumnsKeys } from './payments-list-core2.js';
-import { d as defineCustomElement$3 } from './pagination-menu2.js';
+import { M as MapPaymentStatusToBadge } from './payments-status.js';
+import { h as convertToLocal } from './utils2.js';
+import { B as tableHeadCell, ah as getAlternateTableCellPart } from './parts.js';
+import { o as onQueryParamsChange, g as getRequestParams } from './payments-list-params-state.js';
+import { d as defineCustomElement$2 } from './pagination-menu2.js';
 
 const makeGetPayments = ({ id, authToken, service }) => async ({ params, onSuccess, onError, final }) => {
     var _a, _b;
@@ -48,6 +52,46 @@ const makeGetPayments = ({ id, authToken, service }) => async ({ params, onSucce
     }
 };
 
+const mapCardBrandToDisplayName = (brand) => {
+    if (!brand)
+        return 'N/A';
+    const brandMap = {
+        'visa': 'VISA',
+        'mastercard': 'Mastercard',
+        'american_express': 'American Express',
+        'discover': 'Discover',
+        'diners_club': 'Diners Club',
+        'jcb': 'JCB',
+        'china_unionpay': 'China UnionPay',
+        'unknown': 'Unknown'
+    };
+    return brandMap[brand.toLowerCase()] || brand;
+};
+const defaultColumnsKeys = 'created_at,amount,status,payment_type,description,payers_name,last_four_digits,card_brand';
+const paymentTableColumns = {
+    created_at: () => (h("th", { part: tableHeadCell, scope: "col", title: "The date and time each payment was made" }, "Date")),
+    amount: () => (h("th", { part: tableHeadCell, scope: "col", title: "The dollar amount of each payment" }, "Amount")),
+    status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The current status of each payment" }, "Status")),
+    payment_type: () => (h("th", { part: tableHeadCell, scope: "col", title: "The type of each payment" }, "Type")),
+    description: () => (h("th", { part: tableHeadCell, scope: "col", title: "The payment description, if you provided one" }, "Description")),
+    payers_name: () => (h("th", { part: tableHeadCell, scope: "col", title: "The name associated with the payment method" }, "Account Holder")),
+    last_four_digits: () => (h("th", { part: tableHeadCell, scope: "col", title: "The brand and last 4 digits of the payment method" }, "Payment Method")),
+    card_brand: () => (h("th", { part: tableHeadCell, scope: "col", title: "The brand of the payment method" }, "Card Brand")),
+};
+const paymentTableCells = {
+    created_at: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(payment.created_at, { showDisplayDate: true })), h("div", { class: "fw-bold" }, convertToLocal(payment.created_at, { showTime: true })))),
+    amount: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.formattedPaymentAmount(payment.amount))),
+    status: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, MapPaymentStatusToBadge(payment.status))),
+    payment_type: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.payment_type)),
+    description: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.description)),
+    payers_name: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.payers_name)),
+    last_four_digits: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.last_four_digits)),
+    card_brand: (payment, index) => {
+        var _a, _b;
+        return (h("td", { part: getAlternateTableCellPart(index) }, mapCardBrandToDisplayName(((_a = payment.payment_method.card) === null || _a === void 0 ? void 0 : _a.brand) || ((_b = payment.payment_method.bank_account) === null || _b === void 0 ? void 0 : _b.brand))));
+    },
+};
+
 const JustifiPaymentsList$1 = /*@__PURE__*/ proxyCustomElement(class JustifiPaymentsList extends HTMLElement {
     constructor(registerHost) {
         super();
@@ -56,17 +100,42 @@ const JustifiPaymentsList$1 = /*@__PURE__*/ proxyCustomElement(class JustifiPaym
         }
         this.__attachShadow();
         this.errorEvent = createEvent(this, "error-event", 7);
+        this.clickEvent = createEvent(this, "click-event", 7);
         this.errorMessage = null;
+        this.payments = [];
+        this.loading = true;
+        this.paging = pagingDefaults;
+        this.pagingParams = {};
         this.columns = defaultColumnsKeys;
-        this.handleErrorEvent = (event) => {
-            this.errorMessage = event.detail.message;
-            this.errorEvent.emit(event.detail);
+        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 paymentData = this.payments.find((payment) => payment.id === clickedPaymentID);
+            this.clickEvent.emit({ name: TableClickActions.row, data: paymentData });
         };
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
+        this.paymentsTable = new Table(this.payments, this.columns, paymentTableColumns, paymentTableCells);
         this.initializeGetPayments();
+        onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
+        onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
     disconnectedCallback() {
         var _a;
@@ -76,6 +145,9 @@ const JustifiPaymentsList$1 = /*@__PURE__*/ proxyCustomElement(class JustifiPaym
     propChanged() {
         this.initializeGetPayments();
     }
+    updateOnPropChange() {
+        this.fetchData();
+    }
     initializeGetPayments() {
         if (this.accountId && this.authToken) {
             this.getPayments = makeGetPayments({
@@ -93,28 +165,80 @@ const JustifiPaymentsList$1 = /*@__PURE__*/ proxyCustomElement(class JustifiPaym
             });
         }
     }
+    fetchData() {
+        if (!this.getPayments)
+            return;
+        this.loading = true;
+        this.getPayments({
+            params: this.paymentParams,
+            onSuccess: ({ payments, pagingInfo }) => {
+                this.payments = payments;
+                this.paging = pagingInfo;
+                this.paymentsTable.collectionData = this.payments;
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+            },
+            final: () => {
+                this.loading = false;
+            }
+        });
+    }
+    get paymentParams() {
+        const requestParams = getRequestParams();
+        const params = Object.assign(Object.assign({}, requestParams), this.pagingParams);
+        return params;
+    }
+    get entityId() {
+        return this.payments.map((payment) => payment.id);
+    }
+    get showEmptyState() {
+        return !this.loading && !this.errorMessage && this.paymentsTable.rowData.length < 1;
+    }
+    get showErrorState() {
+        return !this.loading && !!this.errorMessage;
+    }
+    get showRowData() {
+        return !this.showEmptyState && !this.showErrorState && !this.loading;
+    }
     render() {
-        return (h(StyledHost, { key: '1eb44d7abbd8ad6964538435786007fcd1792b41' }, h("payments-list-core", { key: '6e178dfa35e107c2d0653a9fc1e0d1247ef99bb0', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '6e1b9127bd44def13ca0e9360f3ad94e8c99860e' }, h(TableWrapper, { key: '556583538e7dd2cadd84980277da82902eba942f' }, h(TableComponent, { key: 'bc604eb09bcb019786afb272f597da99d6635872' }, h(TableHead, { key: '3e030bf889ea09510c26147d807a427d4a772d23' }, h(TableHeadRow, { key: 'c193117a1db06574c019922536a6982e4c6f09fb' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: 'aa955b2adc05c02fbe7a6c693de4649e90855aba' }, h(TableLoadingState, { key: '35930a22ccdcc360e5e3f192c3fb140711508742', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '1582993843ac6661d2c5b62e07b1911ab940cb3c', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '328f38cc95fb2f854865e4e05ace7e9ce8af8b69', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.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: '0137371c7f1ab00f8ef3d27cebb30525eff6b659' }, h(TableFootRow, { key: '54ed0b9a13338b0bcefba282afe4f2de40e8f539' }, h(TableFootCell, { key: '6b98204f36a989fe9bd2bda65705de88098690c5', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'e3fce4ab3efcc9a33d0b2617cea88026c8a459f3', 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"],
+        "getPayments": ["updateOnPropChange"],
+        "columns": ["updateOnPropChange"]
     }; }
 }, [257, "justifi-payments-list", {
         "accountId": [1, "account-id"],
         "authToken": [1, "auth-token"],
         "columns": [1],
         "getPayments": [32],
-        "errorMessage": [32]
+        "errorMessage": [32],
+        "payments": [32],
+        "paymentsTable": [32],
+        "loading": [32],
+        "paging": [32],
+        "pagingParams": [32]
     }, undefined, {
         "accountId": ["propChanged"],
-        "authToken": ["propChanged"]
+        "authToken": ["propChanged"],
+        "pagingParams": ["updateOnPropChange"],
+        "getPayments": ["updateOnPropChange"],
+        "columns": ["updateOnPropChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payments-list", "pagination-menu", "payments-list-core"];
+    const components = ["justifi-payments-list", "pagination-menu"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payments-list":
             if (!customElements.get(tagName)) {
@@ -122,11 +246,6 @@ function defineCustomElement$1() {
             }
             break;
         case "pagination-menu":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "payments-list-core":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

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

@@ -1,18 +1,24 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import { P as PayoutService } from './payout.service.js';
 import './config-state.js';
 import './dinero.js';
-import { o as Payout, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid.js';
+import { p as Payout, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid.js';
 import './Pagination.js';
 import './Business.js';
 import './ApplePay.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils3.js';
-import { E as ErrorState } from './utils.js';
+import { j as capitalizeFirstLetter, f as formatDate, a as formatTime } from './utils2.js';
+import { E as ErrorState, b as EntityHeadInfo, c as EntityHeadInfoItem, D as DetailSectionTitle, a as DetailItem, C as CodeBlock } from './utils.js';
 import { J as JustifiAnalytics } from './Analytics.js';
-import { m as makeGetPayoutCSV } from './get-payout-csv.js';
+import { m as makeGetPayoutCSV, M as MapPayoutStatusToBadge } from './payouts-status.js';
 import { c as checkPkgVersion } from './check-pkg-version.js';
-import { d as defineCustomElement$3 } from './justifi-details2.js';
-import { d as defineCustomElement$2 } from './payout-details-core2.js';
+import { B as Button } from './button.js';
+import { S as StyledHost } from './styled-host.js';
+import { d as defineCustomElement$2 } from './justifi-details2.js';
+import './event-types.js';
+import './justifi-radio-list-item2.js';
+import { S as Skeleton } from './skeleton.js';
+import { B as Badge, a as BadgeVariant } from './badge.js';
 
 const makeGetPayoutDetails = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
     var _a;
@@ -43,6 +49,8 @@ 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$1 = /*@__PURE__*/ proxyCustomElement(class JustifiPayoutDetails extends HTMLElement {
     constructor(registerHost) {
         super();
@@ -51,17 +59,37 @@ const JustifiPayoutDetails$1 = /*@__PURE__*/ proxyCustomElement(class JustifiPay
         }
         this.__attachShadow();
         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;
@@ -71,6 +99,9 @@ const JustifiPayoutDetails$1 = /*@__PURE__*/ proxyCustomElement(class JustifiPay
     propChanged() {
         this.initializeServices();
     }
+    getPayoutWatcher() {
+        this.fetchData();
+    }
     initializeServices() {
         if (this.payoutId && this.authToken) {
             this.getPayout = makeGetPayoutDetails({
@@ -92,15 +123,41 @@ const JustifiPayoutDetails$1 = /*@__PURE__*/ proxyCustomElement(class JustifiPay
             });
         }
     }
+    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"]
     }; }
 }, [257, "justifi-payout-details", {
         "payoutId": [1, "payout-id"],
@@ -108,16 +165,19 @@ const JustifiPayoutDetails$1 = /*@__PURE__*/ proxyCustomElement(class JustifiPay
         "enableRecordClick": [4, "enable-record-click"],
         "getPayout": [32],
         "getPayoutCSV": [32],
+        "payout": [32],
+        "loading": [32],
         "errorMessage": [32]
     }, undefined, {
         "payoutId": ["propChanged"],
-        "authToken": ["propChanged"]
+        "authToken": ["propChanged"],
+        "getPayout": ["getPayoutWatcher"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payout-details", "justifi-details", "payout-details-core"];
+    const components = ["justifi-payout-details", "justifi-details"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payout-details":
             if (!customElements.get(tagName)) {
@@ -125,11 +185,6 @@ function defineCustomElement$1() {
             }
             break;
         case "justifi-details":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "payout-details-core":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/module/justifi-payout-transactions-list.js

@@ -1,7 +1,7 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import { c as configState } from './config-state.js';
 import './dinero.js';
-import { r as PayoutBalanceTransaction, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid.js';
+import { q as PayoutBalanceTransaction, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Business.js';
 import './ApplePay.js';
@@ -188,7 +188,7 @@ const JustifiPayoutTransactionsList$1 = /*@__PURE__*/ proxyCustomElement(class J
         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/module/justifi-payouts-list-filters.js

@@ -7,7 +7,7 @@ import './event-types.js';
 import './justifi-radio-list-item2.js';
 import { e as convertToUTC, h as convertToLocal } from './utils2.js';
 import './config-state.js';
-import { i as PayoutStatusesSafeNames } from './Plaid.js';
+import { h as PayoutStatusesSafeNames } from './Plaid.js';
 import './Pagination.js';
 import './Business.js';
 import './ApplePay.js';
@@ -57,8 +57,8 @@ const JustifiPayoutsListFilters$1 = /*@__PURE__*/ proxyCustomElement(class Justi
     }
     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 }))))));
     }
 }, [257, "justifi-payouts-list-filters", {