@justifi/webcomponents 6.12.1-rc.5 → 6.12.2

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

@@ -1,12 +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 PaymentService } from './payment.service.js';
 import { m as makeGetPaymentDetails } from './get-payment-details.js';
-import { E as ErrorState } from './utils.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes, n as PaymentStatuses, d as DisputeStatus } from './Plaid.js';
 import { J as JustifiAnalytics } from './Analytics.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 './payment-details-core2.js';
+import './config-state.js';
+import { f as formatDate, a as formatTime, s as snakeCaseToHumanReadable } from './utils2.js';
+import './Pagination.js';
+import './Business.js';
+import './ApplePay.js';
+import { P as PaymentStatusBadge, M as MapPaymentStatusToBadge } from './payments-status.js';
+import { E as ErrorState, b as EntityHeadInfo, c as EntityHeadInfoItem, D as DetailSectionTitle, a as DetailItem, C as CodeBlock } from './utils.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 PaymentDetailsLoading = () => (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 JustifiPaymentDetails$1 = /*@__PURE__*/ proxyCustomElement(class JustifiPaymentDetails extends HTMLElement {
     constructor(registerHost) {
@@ -17,18 +29,7 @@ const JustifiPaymentDetails$1 = /*@__PURE__*/ proxyCustomElement(class JustifiPa
         this.__attachShadow();
         this.errorEvent = createEvent(this, "error-event", 7);
         this.recordClickEvent = createEvent(this, "record-click-event", 7);
-        this.errorMessage = null;
-        this.paymentService = new PaymentService();
-        this.handleErrorEvent = event => {
-            this.errorMessage = event.detail.message;
-            this.errorEvent.emit(event.detail);
-        };
-        this.handleRecordClickEvent = (event) => {
-            this.recordClickEvent.emit({
-                id: event.detail.id,
-                type: event.detail.type,
-            });
-        };
+        this.loading = true;
     }
     componentWillLoad() {
         checkPkgVersion();
@@ -50,6 +51,7 @@ const JustifiPaymentDetails$1 = /*@__PURE__*/ proxyCustomElement(class JustifiPa
                 authToken: this.authToken,
                 service: new PaymentService()
             });
+            this.fetchData();
         }
         else {
             this.errorMessage = 'Payment ID and Auth Token are required';
@@ -60,30 +62,75 @@ const JustifiPaymentDetails$1 = /*@__PURE__*/ proxyCustomElement(class JustifiPa
             });
         }
     }
-    render() {
-        if (this.errorMessage) {
-            return ErrorState(this.errorMessage);
+    updateOnPropChange() {
+        if (this.getPaymentDetails) {
+            this.fetchData();
+        }
+    }
+    fetchData() {
+        this.loading = true;
+        this.getPaymentDetails({
+            onSuccess: ({ payment }) => {
+                this.payment = payment;
+                this.errorMessage = null;
+            },
+            onError: ({ error, code, severity }) => {
+                this.errorMessage = error;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
+            },
+            final: () => {
+                this.loading = false;
+            },
+        });
+    }
+    get PaymentStatus() {
+        if (this.payment.status === PaymentStatuses.disputed) {
+            const disputeWasLost = this.payment.disputes.some((dispute) => dispute.status === DisputeStatus.lost);
+            if (disputeWasLost) {
+                return PaymentStatusBadge.DISPUTE_LOST;
+            }
         }
-        return (h("payment-details-core", { getPaymentDetails: this.getPaymentDetails, "onError-event": this.handleErrorEvent, "onRecord-click-event": this.handleRecordClickEvent, "enable-record-click": "true" }));
+        return this.payment.status;
+    }
+    render() {
+        return (h(StyledHost, { key: '6d899226b71c2f8c80bf42ba0bd3de9d069582e8' }, this.loading && h(PaymentDetailsLoading, { key: '8e17e3f4c880ace7b87270e768610e9ece6e761a' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: '2f5ea94a1fec18581a06f171c34850fc1423ec1f', errorMessage: this.errorMessage }, h(EntityHeadInfo, { key: '5f011ef4b84acc2c16974293079c2d7b0134f8c6', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPaymentStatusToBadge(this.PaymentStatus), this.payment.expedited ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : null)), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '5c075c53a5c589b7bc65ab60bf2ef7d8a67a7afb', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '01786dce8a3c582fbd1f471174ecd13f95604e24', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'b04c5c8dfc64aba71d9cc0cd84c25bd32bdc887f', title: "ID", value: this.payment.id })), h("div", { key: '52bb00c09abe0745a03f264b3667584c10f58eee', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '0672c1ed0c4e7f109531e120f61256927eba48eb', sectionTitle: "Details" }), h("div", { key: 'd784569e100926eefb120e1a4b2d9a4d6da4238a', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '58192f1824f4b02a206b6c442e63b86fc90ea742', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '0b885dc6f6f7a4890666ecdb2a1cc801bbf1df31', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'e517d5dbd76cf451e89f803f26b0375a6fd0420b', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: 'ec3cf850c0217230794e6487861dbab0da5ad463', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '8f0d1f4b858ff459b9d08c168ff204e87a0c715e', title: "Status", value: MapPaymentStatusToBadge(this.PaymentStatus) }), h(DetailItem, { key: '819e1c1dbf090c664430b8e00ede6a88b9ecf5c2', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: 'a86688bc8015db6b1034e6dd2a9819e1dbe5bb30', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '7dbb9825135d66711e65fb1b1bb2be228d65bb57', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '0455c1b7e853ba4e16197cdca3e2f0b16455362a', title: "Description", value: this.payment.description }), h(DetailItem, { key: 'b052be4a1a349eb6a439e5c4be4424f966c55e60', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: 'dca0ae73fa7f879d6cfb3f3b20331cf48d6081e4', sectionTitle: "Payment Method" }),
+            h("div", { key: 'fd3dd48f6ad1f3565459fb3ac10115f0b32051f9', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '8c00d775e7c4ef57689574974ee47b7c87f98b13', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '2d3bc94126c2a02cb32fca8d952a238fdc0960c6', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '16938c62ba1eafbf79af00c90c66c7250a81fbbb', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '04d9f9a2a7e3ace45f4b0001cf53b069f470529a', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '559be48e5ac2083369e7984d53e85ee5fbbab008', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        ], this.payment.payment_method.bank_account && [
+            h(DetailSectionTitle, { key: '25277f2e5526747de9f45416050c6b72873e382b', sectionTitle: "Payment Method" }),
+            h("div", { key: 'e0b69c8397665a33c1f0d14bd9438b19e70b8636', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: 'ff0365efd2c8ed7a2aa7d3552504a6d9097c28b3', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '269d136045549cd12e4519e7f4abf3b6d221da85', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '31b5aaf03f5bf15267ac16b4b4a2d26f0a01e988', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '15f9c03d3514ebb78d25955497a728c8a2c53f7e', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], this.payment.metadata && [
+            h(DetailSectionTitle, { key: 'dac3bf342764c2e10ac6b64eabc5ef0366446a31', sectionTitle: 'Metadata' }),
+            h("div", { key: '2fe93fb287b469a5b1f3230b5f657216815d1164', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'f77b6a4ebeb88b82fe8342789bd16b7b22f24db9', metadata: this.payment.metadata }))
+        ])))));
     }
     static get watchers() { return {
         "paymentId": ["propChanged"],
-        "authToken": ["propChanged"]
+        "authToken": ["propChanged"],
+        "getPaymentDetails": ["updateOnPropChange"]
     }; }
 }, [257, "justifi-payment-details", {
         "paymentId": [1, "payment-id"],
         "authToken": [1, "auth-token"],
         "getPaymentDetails": [32],
+        "payment": [32],
+        "loading": [32],
         "errorMessage": [32]
     }, undefined, {
         "paymentId": ["propChanged"],
-        "authToken": ["propChanged"]
+        "authToken": ["propChanged"],
+        "getPaymentDetails": ["updateOnPropChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payment-details", "justifi-details", "payment-details-core"];
+    const components = ["justifi-payment-details", "justifi-details"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payment-details":
             if (!customElements.get(tagName)) {
@@ -91,11 +138,6 @@ function defineCustomElement$1() {
             }
             break;
         case "justifi-details":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "payment-details-core":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/module/justifi-payment-provisioning.js

@@ -8,7 +8,7 @@ import './Pagination.js';
 import { a as CountryCode, b as Business, f as checkProvisioningStatus } from './Business.js';
 import './ApplePay.js';
 import { c as checkPkgVersion } from './check-pkg-version.js';
-import { m as isTokenExpired } from './utils2.js';
+import { l as isTokenExpired } from './utils2.js';
 import { j as text } from './parts.js';
 import { S as StyledHost } from './styled-host.js';
 import { H as Header1 } from './header-1.js';
@@ -139,7 +139,9 @@ const JustifiPaymentProvisioning$1 = /*@__PURE__*/ proxyCustomElement(class Just
             }
         };
         this.decrementSteps = () => {
-            return this.currentStep--;
+            if (this.currentStep > 0) {
+                this.currentStep -= 1;
+            }
         };
         this.previousStepButtonOnClick = () => {
             this.clickEvent.emit({ name: BusinessFormClickActions.previousStep });

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

@@ -1,7 +1,7 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import './config-state.js';
 import './dinero.js';
-import { q as PaymentBalanceTransaction, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid.js';
+import { o as PaymentBalanceTransaction, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Business.js';
 import './ApplePay.js';
@@ -187,7 +187,7 @@ const JustifiPaymentTransactionsList$1 = /*@__PURE__*/ proxyCustomElement(class
         return !this.showEmptyState && !this.showErrorState && !this.isLoading;
     }
     render() {
-        return (h(StyledHost, { key: 'e37b6e324069ec5ecac70b34058d476c661d36e3' }, h(TableWrapper, { key: 'cd7291ea2f1ce756fd90c877ad9378f0323ac8ca' }, h(TableComponent, { key: '52daba4c8aa7a918a5d126b64912d6784324a5a8' }, h(TableHead, { key: 'b73c79df19722ad10de0ce5f604dbdb7ccb7cdda' }, h(TableHeadRow, { key: '7ca076370634e96a8b356a10acea69d9e80bd482' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '52c751a3204c0df4829eaf9d60efaa64e2c9c09c' }, h(TableLoadingState, { key: 'f23c6b0f585cf2bf1a62d75c6b652941a4cad9fd', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '283c12b30f62396e3cf551360b7dc3a1e2079d03', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '02501dfbb91e079b6eecc0260104f6b02a62b6d3', 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: '2465201b12d25fbe1c8d7f23a5178b2b1aaa9896' }, h(TableFootRow, { key: '98b72bb125ba8db7d879cfd10bdeb3b2d7566951' }, h(TableFootCell, { key: '7f9c06cc8e60fa0e848db2fa9f2cfff465254a7b', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '14a74894ca178e16c627c7d0b8ced3ade5a7a5cb', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: 'bbe4f24aad52765c9566adf52917ecb5562ef38f' }, h(TableWrapper, { key: '6009d27d08b8940404342e4fd34ac99fd019510f' }, h(TableComponent, { key: 'eaa81f8eb813dc3f95ccf42eb44092cf7a52f61f' }, h(TableHead, { key: 'beafd55ed8304616b85ad6fe17c17dca47b7a5f1' }, h(TableHeadRow, { key: 'e6a086d41ce143c780684548fc3483eada36ab59' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '2e63ef1777fff0db965c1a2d1b3730d6236bba0c' }, h(TableLoadingState, { key: 'd84464c074bb55717c59559bda6e36c925394fcd', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: 'e2d4297ea72f8310ddee6931be89b2fa51579085', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: 'e686616f839acdadcb2802bf2ff9ca64524b9b18', 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: 'dc3a9ec5bf2e88a2a3dbdbd174c7cb860a6b93c4' }, h(TableFootRow, { key: '8ddc32fec0a7edea53f8e34537b8999c5bb729bf' }, h(TableFootCell, { key: 'eb8de1c3e3fcb2aa4a78c838e93b1400ec750170', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: 'aa1df15f4381600961f7d61af8141d96cc27db47', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
         "pagingParams": ["propChanged"],

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

@@ -69,8 +69,8 @@ const JustifiPaymentsListFilters$1 = /*@__PURE__*/ proxyCustomElement(class Just
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '207e63a2da8b81ab308d51a2253d68296c92cc25' }, h("table-filters-menu", { key: 'cbac700ee156ab458ecf0d3f247daf47f312b22f', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: 'f30ae88dbbf58d82f9346b5446162cb7bc9eb941', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'b145a12bbf125e21cd7a509af7f8f469b0b12632', class: "p-2" }, h("form-control-text", { key: 'ca232fee8aae5b9dde54d0d1aeb434b94bc9f051', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: filterParam })), h("div", { key: 'bdb153b7aa40dae43cf263a570a64e2bc2864ec8', class: "p-2" }, h("form-control-text", { key: '5c51c88a7233d06a6b3614b244d2185eb1aba840', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: filterParam })), h("div", { key: '67039d13a6c999feeb93ae79ca1ad822869e15de', class: "p-2" }, h("form-control-select", { key: '18e5d4e0dab9b2127a5308e7b0f5b689e68caead', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status || '', disabled: !!this.paymentStatus, part: filterParam })), h("div", { key: 'f4af14ee692a80e7d8ccdd0a35375d70035ee542', class: "p-2" }, h("form-control-select", { key: 'fa9600ca81d8ad37bea6f1c665853c6faa439b75', name: "payment_mode", label: "Payment Mode", options: this.paymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode || '', disabled: !!this.paymentMode, part: filterParam })), h("div", { key: '6daa2ccec1eedd117b5d71c3d6bf25f02aea1801', class: "p-2" }, h("form-control-text", { key: '27fabe15bcc2c3b9fe1694c6a637523c5676eee4', name: "checkout_id", label: "Checkout ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.checkoutId || filterParams.checkout_id, disabled: !!this.checkoutId, part: filterParam })), h("div", { key: 'edbf45a5e54a3968eb6b12ece0084cfdad166b2a', class: "p-2" }, h("form-control-text", { key: 'fe1c023959280bf3e8ea087d8bd1f9fb63800637', name: "account_holder", label: "Account Holder", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.accountHolder || filterParams.account_holder, disabled: !!this.accountHolder, part: filterParam })), h("div", { key: '73851511ecefbca4abfae459284571c077f4aef2', class: "p-2" }, h("form-control-date", { key: 'c0f34a0eded3ed2b941fdb1ec6f62d73d4d3e86b', 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: '98441cb89498d7e7174fac584b48d05eafd43cce', class: "p-2" }, h("form-control-date", { key: '56cb9cd19f1cf5534b168da26d96100608859bd7', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: '7239157d27cff26ea5528329bfca3723819734f7' }, h("table-filters-menu", { key: '2a35afad1c98d866a760f5ece5cccaed59a68afe', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: '5e6a94571beb586b64672e6def26b0af367188af', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '1b5f9000a447b25ec751c4e54fb2525d70c0b949', class: "p-2" }, h("form-control-text", { key: 'd2bc10bc3b8ca99b41b7ed4bc93f149692aabda9', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: filterParam })), h("div", { key: '679da822c026a83e86ef0e055a26fc4963173e68', class: "p-2" }, h("form-control-text", { key: '12083ad10bf9c8b2f207ee3ea0a74c32a7176a11', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: filterParam })), h("div", { key: 'dbb6570354460ec261c889e7a45eddf0c407ef22', class: "p-2" }, h("form-control-select", { key: '28406bc8f4273a903d26d89d431beb411a288fb5', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status || '', disabled: !!this.paymentStatus, part: filterParam })), h("div", { key: '01511cce2def1253b5be7a53defb50bdb659c7bd', class: "p-2" }, h("form-control-select", { key: '9cd3148c5f944825ac97dcf85f0e7780c712f3f2', name: "payment_mode", label: "Payment Mode", options: this.paymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode || '', disabled: !!this.paymentMode, part: filterParam })), h("div", { key: 'b834569a7db874cb3426aa8d31b909fc99d9bafb', class: "p-2" }, h("form-control-text", { key: 'f2f4d01e739a17ca7b84a9153cdcfa9ff1f6e233', name: "checkout_id", label: "Checkout ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.checkoutId || filterParams.checkout_id, disabled: !!this.checkoutId, part: filterParam })), h("div", { key: '81e701c6a73504706b79f1f6177b9de3413d0741', class: "p-2" }, h("form-control-text", { key: '5b82aab4b4a3e17466c66de4454cdda6c007d1c5', name: "account_holder", label: "Account Holder", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.accountHolder || filterParams.account_holder, disabled: !!this.accountHolder, part: filterParam })), h("div", { key: 'bce1fa46f53f4056e11d94c30b93ff6ee4036a4c', class: "p-2" }, h("form-control-date", { key: 'c13f82cdf9e2736bf45be98dc994f9e402f7bb2e', 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: 'd4c3db0970e19065a5cafb74491081e7897ce751', class: "p-2" }, h("form-control-date", { key: 'd7fa40e94c4da778ead2c4fa1dc5511783d55f3e', 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 }))))));
     }
 }, [257, "justifi-payments-list-filters", {

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();
             }