@justifi/webcomponents 6.12.1-rc.5 → 6.12.2

package/dist/cjs/justifi-payment-details.cjs.entry.js

@@ -1,41 +1,37 @@
 'use strict';
 
 var index = require('./index-p7cvUYAE.js');
-var payment_service = require('./payment.service-CiOWHJtd.js');
-var getPaymentDetails = require('./get-payment-details-qWCANtqS.js');
-var utils = require('./utils-8RGQVADu.js');
-var Plaid = require('./Plaid-DAigb4JE.js');
-var Analytics = require('./Analytics-D4AupIs5.js');
-var checkPkgVersion = require('./check-pkg-version-Cl1JxnNX.js');
-require('./Api-Bukk55YZ.js');
+var payment_service = require('./payment.service-sZKlg2Jq.js');
+var getPaymentDetails = require('./get-payment-details-DL5FmIyF.js');
+var Plaid = require('./Plaid-BlSGeGpn.js');
+var Analytics = require('./Analytics-C1Wd9OW4.js');
+var checkPkgVersion = require('./check-pkg-version-DMXmPDqZ.js');
 require('./config-state-BIgGhhe9.js');
-require('./index-W-zoNiyM.js');
-require('./utils-BHi4j5rB.js');
-require('./dinero-BwNN_k7x.js');
+var utils$1 = require('./utils-BHi4j5rB.js');
 require('./Pagination-Dediz133.js');
 require('./Business-oBifyXkW.js');
-require('./Dispute-CruQTF6_.js');
-require('./utils-CIjcxKu1.js');
+var Dispute = require('./Dispute-CruQTF6_.js');
+var paymentsStatus = require('./payments-status-Bj_bCKUP.js');
+var utils = require('./utils-8RGQVADu.js');
+var styledHost = require('./styled-host-DAi5SuFa.js');
+require('./event-types-YOY5TKUN.js');
+var skeleton = require('./skeleton-DvRCiQlA.js');
+var badge = require('./badge-GBNtUypt.js');
+require('./Api-Bukk55YZ.js');
+require('./dinero-BwNN_k7x.js');
+require('./utils-DbTucCTO.js');
+require('./package-CRaVpb0w.js');
+require('./index-W-zoNiyM.js');
 require('./parts-BXshb_S-.js');
-require('./package-BRuzzVG1.js');
+
+const PaymentDetailsLoading = () => (index.h("div", { class: "row gap-3" }, index.h("div", { class: "col-12" }, index.h(skeleton.Skeleton, { width: "35%", height: "30px" })), index.h("div", { class: "col-12" }, index.h(skeleton.Skeleton, { width: "70%" })), index.h("div", { class: "col-12" }, index.h(skeleton.Skeleton, { width: "40%" })), index.h("div", { class: "col-12" }, index.h(skeleton.Skeleton, { width: "40%" })), index.h("div", { class: "col-12" }, index.h(skeleton.Skeleton, { width: "100%" })), index.h("div", { class: "col-12" }, index.h(skeleton.Skeleton, { width: "80%" }))));
 
 const JustifiPaymentDetails = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.errorEvent = index.createEvent(this, "error-event", 7);
         this.recordClickEvent = index.createEvent(this, "record-click-event", 7);
-        this.errorMessage = null;
-        this.paymentService = new payment_service.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.checkPkgVersion();
@@ -57,6 +53,7 @@ const JustifiPaymentDetails = class {
                 authToken: this.authToken,
                 service: new payment_service.PaymentService()
             });
+            this.fetchData();
         }
         else {
             this.errorMessage = 'Payment ID and Auth Token are required';
@@ -67,15 +64,57 @@ const JustifiPaymentDetails = class {
             });
         }
     }
-    render() {
-        if (this.errorMessage) {
-            return utils.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 === Plaid.PaymentStatuses.disputed) {
+            const disputeWasLost = this.payment.disputes.some((dispute) => dispute.status === Dispute.DisputeStatus.lost);
+            if (disputeWasLost) {
+                return paymentsStatus.PaymentStatusBadge.DISPUTE_LOST;
+            }
         }
-        return (index.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 (index.h(styledHost.StyledHost, { key: '6d899226b71c2f8c80bf42ba0bd3de9d069582e8' }, this.loading && index.h(PaymentDetailsLoading, { key: '8e17e3f4c880ace7b87270e768610e9ece6e761a' }), !this.loading && this.errorMessage && utils.ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (index.h("justifi-details", { key: '2f5ea94a1fec18581a06f171c34850fc1423ec1f', errorMessage: this.errorMessage }, index.h(utils.EntityHeadInfo, { key: '5f011ef4b84acc2c16974293079c2d7b0134f8c6', slot: "head-info", badge: (index.h("div", { class: "d-flex gap-1" }, paymentsStatus.MapPaymentStatusToBadge(this.PaymentStatus), this.payment.expedited ? (index.h(badge.Badge, { variant: badge.BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : null)), title: this.payment.formattedPaymentAmount(this.payment.amount) }, index.h(utils.EntityHeadInfoItem, { key: '5c075c53a5c589b7bc65ab60bf2ef7d8a67a7afb', classes: "border-1 border-end", title: "Updated At", value: `${utils$1.formatDate(this.payment.updated_at)} ${utils$1.formatTime(this.payment.updated_at)}` }), index.h(utils.EntityHeadInfoItem, { key: '01786dce8a3c582fbd1f471174ecd13f95604e24', classes: "border-1 border-end", title: "Created At", value: `${utils$1.formatDate(this.payment.created_at)} ${utils$1.formatTime(this.payment.created_at)}` }), index.h(utils.EntityHeadInfoItem, { key: 'b04c5c8dfc64aba71d9cc0cd84c25bd32bdc887f', title: "ID", value: this.payment.id })), index.h("div", { key: '52bb00c09abe0745a03f264b3667584c10f58eee', slot: 'detail-sections' }, index.h(utils.DetailSectionTitle, { key: '0672c1ed0c4e7f109531e120f61256927eba48eb', sectionTitle: "Details" }), index.h("div", { key: 'd784569e100926eefb120e1a4b2d9a4d6da4238a', class: "d-flex flex-column gap-2 w-100" }, index.h(utils.DetailItem, { key: '58192f1824f4b02a206b6c442e63b86fc90ea742', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), index.h(utils.DetailItem, { key: '0b885dc6f6f7a4890666ecdb2a1cc801bbf1df31', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), index.h(utils.DetailItem, { key: 'e517d5dbd76cf451e89f803f26b0375a6fd0420b', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), index.h(utils.DetailItem, { key: 'ec3cf850c0217230794e6487861dbab0da5ad463', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), index.h(utils.DetailItem, { key: '8f0d1f4b858ff459b9d08c168ff204e87a0c715e', title: "Status", value: paymentsStatus.MapPaymentStatusToBadge(this.PaymentStatus) }), index.h(utils.DetailItem, { key: '819e1c1dbf090c664430b8e00ede6a88b9ecf5c2', title: "Payment ID", value: this.payment.id }), index.h(utils.DetailItem, { key: 'a86688bc8015db6b1034e6dd2a9819e1dbe5bb30', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), index.h(utils.DetailItem, { key: '7dbb9825135d66711e65fb1b1bb2be228d65bb57', title: "Statement Descriptor", value: this.payment.statement_descriptor }), index.h(utils.DetailItem, { key: '0455c1b7e853ba4e16197cdca3e2f0b16455362a', title: "Description", value: this.payment.description }), index.h(utils.DetailItem, { key: 'b052be4a1a349eb6a439e5c4be4424f966c55e60', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
+            index.h(utils.DetailSectionTitle, { key: 'dca0ae73fa7f879d6cfb3f3b20331cf48d6081e4', sectionTitle: "Payment Method" }),
+            index.h("div", { key: 'fd3dd48f6ad1f3565459fb3ac10115f0b32051f9', class: "d-flex flex-column gap-2 w-100" }, index.h(utils.DetailItem, { key: '8c00d775e7c4ef57689574974ee47b7c87f98b13', title: "ID", value: this.payment.payment_method.card.id }), index.h(utils.DetailItem, { key: '2d3bc94126c2a02cb32fca8d952a238fdc0960c6', title: "Payment Type", value: "Card" }), index.h(utils.DetailItem, { key: '16938c62ba1eafbf79af00c90c66c7250a81fbbb', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), index.h(utils.DetailItem, { key: '04d9f9a2a7e3ace45f4b0001cf53b069f470529a', title: "Brand", value: utils$1.snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), index.h(utils.DetailItem, { key: '559be48e5ac2083369e7984d53e85ee5fbbab008', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        ], this.payment.payment_method.bank_account && [
+            index.h(utils.DetailSectionTitle, { key: '25277f2e5526747de9f45416050c6b72873e382b', sectionTitle: "Payment Method" }),
+            index.h("div", { key: 'e0b69c8397665a33c1f0d14bd9438b19e70b8636', class: "d-flex flex-column gap-2 w-100" }, index.h(utils.DetailItem, { key: 'ff0365efd2c8ed7a2aa7d3552504a6d9097c28b3', title: "ID", value: this.payment.payment_method.bank_account.id }), index.h(utils.DetailItem, { key: '269d136045549cd12e4519e7f4abf3b6d221da85', title: "Last 4 Numbers", value: this.payment.last_four_digits }), index.h(utils.DetailItem, { key: '31b5aaf03f5bf15267ac16b4b4a2d26f0a01e988', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), index.h(utils.DetailItem, { key: '15f9c03d3514ebb78d25955497a728c8a2c53f7e', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], this.payment.metadata && [
+            index.h(utils.DetailSectionTitle, { key: 'dac3bf342764c2e10ac6b64eabc5ef0366446a31', sectionTitle: 'Metadata' }),
+            index.h("div", { key: '2fe93fb287b469a5b1f3230b5f657216815d1164', class: "d-table gap-2 w-100" }, index.h(utils.CodeBlock, { key: 'f77b6a4ebeb88b82fe8342789bd16b7b22f24db9', metadata: this.payment.metadata }))
+        ])))));
     }
     static get watchers() { return {
         "paymentId": ["propChanged"],
-        "authToken": ["propChanged"]
+        "authToken": ["propChanged"],
+        "getPaymentDetails": ["updateOnPropChange"]
     }; }
 };
 

package/dist/cjs/justifi-payment-provisioning.cjs.entry.js

@@ -1,15 +1,15 @@
 'use strict';
 
 var index = require('./index-p7cvUYAE.js');
-var Analytics = require('./Analytics-D4AupIs5.js');
-var Plaid = require('./Plaid-DAigb4JE.js');
-var paymentProvisioningActions = require('./payment-provisioning-actions-COLn1qHN.js');
-var business_service = require('./business.service-CdT38fur.js');
+var Analytics = require('./Analytics-C1Wd9OW4.js');
+var Plaid = require('./Plaid-BlSGeGpn.js');
+var paymentProvisioningActions = require('./payment-provisioning-actions-BO7dzIm1.js');
+var business_service = require('./business.service-BheJs82v.js');
 var Api = require('./Api-Bukk55YZ.js');
 require('./Pagination-Dediz133.js');
 var Business = require('./Business-oBifyXkW.js');
 require('./Dispute-CruQTF6_.js');
-var checkPkgVersion = require('./check-pkg-version-Cl1JxnNX.js');
+var checkPkgVersion = require('./check-pkg-version-DMXmPDqZ.js');
 var utils = require('./utils-BHi4j5rB.js');
 var parts = require('./parts-BXshb_S-.js');
 var styledHost = require('./styled-host-DAi5SuFa.js');
@@ -17,8 +17,8 @@ var header1 = require('./header-1-CsBQoo1f.js');
 require('./event-types-YOY5TKUN.js');
 var eventTypes = require('./event-types-DNOUef41.js');
 var paymentProvisioningLoading = require('./payment-provisioning-loading-tM9WWmxv.js');
-require('./package-BRuzzVG1.js');
-require('./utils-CIjcxKu1.js');
+require('./package-CRaVpb0w.js');
+require('./utils-DbTucCTO.js');
 require('./config-state-BIgGhhe9.js');
 require('./index-W-zoNiyM.js');
 require('./dinero-BwNN_k7x.js');
@@ -110,7 +110,9 @@ const JustifiPaymentProvisioning = class {
             }
         };
         this.decrementSteps = () => {
-            return this.currentStep--;
+            if (this.currentStep > 0) {
+                this.currentStep -= 1;
+            }
         };
         this.previousStepButtonOnClick = () => {
             this.clickEvent.emit({ name: eventTypes.BusinessFormClickActions.previousStep });

package/dist/cjs/justifi-payment-transactions-list.cjs.entry.js

@@ -3,21 +3,21 @@
 var index = require('./index-p7cvUYAE.js');
 require('./config-state-BIgGhhe9.js');
 require('./dinero-BwNN_k7x.js');
-var Plaid = require('./Plaid-DAigb4JE.js');
+var Plaid = require('./Plaid-BlSGeGpn.js');
 var Pagination = require('./Pagination-Dediz133.js');
 require('./Business-oBifyXkW.js');
 require('./Dispute-CruQTF6_.js');
-var Analytics = require('./Analytics-D4AupIs5.js');
-var checkPkgVersion = require('./check-pkg-version-Cl1JxnNX.js');
-var utils = require('./utils-CIjcxKu1.js');
-var payment_service = require('./payment.service-CiOWHJtd.js');
+var Analytics = require('./Analytics-C1Wd9OW4.js');
+var checkPkgVersion = require('./check-pkg-version-DMXmPDqZ.js');
+var utils = require('./utils-DbTucCTO.js');
+var payment_service = require('./payment.service-sZKlg2Jq.js');
 var table = require('./table-DjbNv28p.js');
 var styledHost = require('./styled-host-DAi5SuFa.js');
 var eventTypes = require('./event-types-YOY5TKUN.js');
 var utils$1 = require('./utils-BHi4j5rB.js');
 var parts = require('./parts-BXshb_S-.js');
 require('./index-W-zoNiyM.js');
-require('./package-BRuzzVG1.js');
+require('./package-CRaVpb0w.js');
 require('./Api-Bukk55YZ.js');
 require('./spinner-C6ZGOB2P.js');
 
@@ -186,7 +186,7 @@ const JustifiPaymentTransactionsList = class {
         return !this.showEmptyState && !this.showErrorState && !this.isLoading;
     }
     render() {
-        return (index.h(styledHost.StyledHost, { key: 'e37b6e324069ec5ecac70b34058d476c661d36e3' }, index.h(table.TableWrapper, { key: 'cd7291ea2f1ce756fd90c877ad9378f0323ac8ca' }, index.h(table.TableComponent, { key: '52daba4c8aa7a918a5d126b64912d6784324a5a8' }, index.h(table.TableHead, { key: 'b73c79df19722ad10de0ce5f604dbdb7ccb7cdda' }, index.h(table.TableHeadRow, { key: '7ca076370634e96a8b356a10acea69d9e80bd482' }, this.transactionsTable.columnData.map((column) => column))), index.h(table.TableBody, { key: '52c751a3204c0df4829eaf9d60efaa64e2c9c09c' }, index.h(table.TableLoadingState, { key: 'f23c6b0f585cf2bf1a62d75c6b652941a4cad9fd', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), index.h(table.TableEmptyState, { key: '283c12b30f62396e3cf551360b7dc3a1e2079d03', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), index.h(table.TableErrorState, { key: '02501dfbb91e079b6eecc0260104f6b02a62b6d3', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index$1) => (index.h(table.TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index$1], onClick: this.rowClickHandler }, data)))), this.paging && (index.h(table.TableFoot, { key: '2465201b12d25fbe1c8d7f23a5178b2b1aaa9896' }, index.h(table.TableFootRow, { key: '98b72bb125ba8db7d879cfd10bdeb3b2d7566951' }, index.h(table.TableFootCell, { key: '7f9c06cc8e60fa0e848db2fa9f2cfff465254a7b', colSpan: this.transactionsTable.columnData.length }, index.h("pagination-menu", { key: '14a74894ca178e16c627c7d0b8ced3ade5a7a5cb', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (index.h(styledHost.StyledHost, { key: 'bbe4f24aad52765c9566adf52917ecb5562ef38f' }, index.h(table.TableWrapper, { key: '6009d27d08b8940404342e4fd34ac99fd019510f' }, index.h(table.TableComponent, { key: 'eaa81f8eb813dc3f95ccf42eb44092cf7a52f61f' }, index.h(table.TableHead, { key: 'beafd55ed8304616b85ad6fe17c17dca47b7a5f1' }, index.h(table.TableHeadRow, { key: 'e6a086d41ce143c780684548fc3483eada36ab59' }, this.transactionsTable.columnData.map((column) => column))), index.h(table.TableBody, { key: '2e63ef1777fff0db965c1a2d1b3730d6236bba0c' }, index.h(table.TableLoadingState, { key: 'd84464c074bb55717c59559bda6e36c925394fcd', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), index.h(table.TableEmptyState, { key: 'e2d4297ea72f8310ddee6931be89b2fa51579085', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), index.h(table.TableErrorState, { key: 'e686616f839acdadcb2802bf2ff9ca64524b9b18', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.rowData.map((data, index$1) => (index.h(table.TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index$1], onClick: this.rowClickHandler }, data)))), this.paging && (index.h(table.TableFoot, { key: 'dc3a9ec5bf2e88a2a3dbdbd174c7cb860a6b93c4' }, index.h(table.TableFootRow, { key: '8ddc32fec0a7edea53f8e34537b8999c5bb729bf' }, index.h(table.TableFootCell, { key: 'eb8de1c3e3fcb2aa4a78c838e93b1400ec750170', colSpan: this.transactionsTable.columnData.length }, index.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/cjs/justifi-payments-list-filters.cjs.entry.js

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

package/dist/cjs/justifi-payments-list.cjs.entry.js

@@ -1,26 +1,28 @@
 'use strict';
 
 var index = require('./index-p7cvUYAE.js');
-var payment_service = require('./payment.service-CiOWHJtd.js');
+var payment_service = require('./payment.service-sZKlg2Jq.js');
 require('./config-state-BIgGhhe9.js');
 require('./dinero-BwNN_k7x.js');
-var Plaid = require('./Plaid-DAigb4JE.js');
-require('./Pagination-Dediz133.js');
+var Plaid = require('./Plaid-BlSGeGpn.js');
+var Pagination = require('./Pagination-Dediz133.js');
 require('./Business-oBifyXkW.js');
 require('./Dispute-CruQTF6_.js');
-var utils = require('./utils-CIjcxKu1.js');
-var Analytics = require('./Analytics-D4AupIs5.js');
-var checkPkgVersion = require('./check-pkg-version-Cl1JxnNX.js');
+var utils = require('./utils-DbTucCTO.js');
+var Analytics = require('./Analytics-C1Wd9OW4.js');
+var checkPkgVersion = require('./check-pkg-version-DMXmPDqZ.js');
 var styledHost = require('./styled-host-DAi5SuFa.js');
-require('./event-types-YOY5TKUN.js');
-var paymentsTable = require('./payments-table-CUxpxNnc.js');
+var table = require('./table-DjbNv28p.js');
+var eventTypes = require('./event-types-YOY5TKUN.js');
+var paymentsStatus = require('./payments-status-Bj_bCKUP.js');
+var utils$1 = require('./utils-BHi4j5rB.js');
+var parts = require('./parts-BXshb_S-.js');
+var paymentsListParamsState = require('./payments-list-params-state-vGJZ6Oe2.js');
 require('./Api-Bukk55YZ.js');
-require('./utils-BHi4j5rB.js');
 require('./index-W-zoNiyM.js');
-require('./package-BRuzzVG1.js');
-require('./payments-status-Bj_bCKUP.js');
+require('./package-CRaVpb0w.js');
+require('./spinner-C6ZGOB2P.js');
 require('./badge-GBNtUypt.js');
-require('./parts-BXshb_S-.js');
 
 const makeGetPayments = ({ id, authToken, service }) => async ({ params, onSuccess, onError, final }) => {
     var _a, _b;
@@ -54,21 +56,86 @@ 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: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The date and time each payment was made" }, "Date")),
+    amount: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The dollar amount of each payment" }, "Amount")),
+    status: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The current status of each payment" }, "Status")),
+    payment_type: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The type of each payment" }, "Type")),
+    description: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The payment description, if you provided one" }, "Description")),
+    payers_name: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The name associated with the payment method" }, "Account Holder")),
+    last_four_digits: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The brand and last 4 digits of the payment method" }, "Payment Method")),
+    card_brand: () => (index.h("th", { part: parts.tableHeadCell, scope: "col", title: "The brand of the payment method" }, "Card Brand")),
+};
+const paymentTableCells = {
+    created_at: (payment, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, index.h("div", { class: "fw-bold" }, utils$1.convertToLocal(payment.created_at, { showDisplayDate: true })), index.h("div", { class: "fw-bold" }, utils$1.convertToLocal(payment.created_at, { showTime: true })))),
+    amount: (payment, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payment.formattedPaymentAmount(payment.amount))),
+    status: (payment, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, paymentsStatus.MapPaymentStatusToBadge(payment.status))),
+    payment_type: (payment, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payment.payment_type)),
+    description: (payment, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payment.description)),
+    payers_name: (payment, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payment.payers_name)),
+    last_four_digits: (payment, index$1) => (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, payment.last_four_digits)),
+    card_brand: (payment, index$1) => {
+        var _a, _b;
+        return (index.h("td", { part: parts.getAlternateTableCellPart(index$1) }, 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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.errorEvent = index.createEvent(this, "error-event", 7);
+        this.clickEvent = index.createEvent(this, "click-event", 7);
         this.errorMessage = null;
-        this.columns = paymentsTable.defaultColumnsKeys;
-        this.handleErrorEvent = (event) => {
-            this.errorMessage = event.detail.message;
-            this.errorEvent.emit(event.detail);
+        this.payments = [];
+        this.loading = true;
+        this.paging = Pagination.pagingDefaults;
+        this.pagingParams = {};
+        this.columns = defaultColumnsKeys;
+        this.handleClickPrevious = (beforeCursor) => {
+            this.pagingParams = { before_cursor: beforeCursor };
+            this.clickEvent.emit({ name: eventTypes.TableClickActions.previous });
+        };
+        this.handleClickNext = (afterCursor) => {
+            this.pagingParams = { after_cursor: afterCursor };
+            this.clickEvent.emit({ name: eventTypes.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: eventTypes.TableClickActions.row, data: paymentData });
         };
     }
     componentWillLoad() {
         checkPkgVersion.checkPkgVersion();
         this.analytics = new Analytics.JustifiAnalytics(this);
+        this.paymentsTable = new table.Table(this.payments, this.columns, paymentTableColumns, paymentTableCells);
         this.initializeGetPayments();
+        paymentsListParamsState.onQueryParamsChange('set', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
+        paymentsListParamsState.onQueryParamsChange('reset', () => {
+            this.pagingParams = {};
+            this.errorMessage = '';
+        });
     }
     disconnectedCallback() {
         var _a;
@@ -78,6 +145,9 @@ const JustifiPaymentsList = class {
     propChanged() {
         this.initializeGetPayments();
     }
+    updateOnPropChange() {
+        this.fetchData();
+    }
     initializeGetPayments() {
         if (this.accountId && this.authToken) {
             this.getPayments = makeGetPayments({
@@ -95,12 +165,56 @@ const JustifiPaymentsList = class {
             });
         }
     }
+    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 = paymentsListParamsState.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 (index.h(styledHost.StyledHost, { key: '1eb44d7abbd8ad6964538435786007fcd1792b41' }, index.h("payments-list-core", { key: '6e178dfa35e107c2d0653a9fc1e0d1247ef99bb0', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (index.h(styledHost.StyledHost, { key: '6e1b9127bd44def13ca0e9360f3ad94e8c99860e' }, index.h(table.TableWrapper, { key: '556583538e7dd2cadd84980277da82902eba942f' }, index.h(table.TableComponent, { key: 'bc604eb09bcb019786afb272f597da99d6635872' }, index.h(table.TableHead, { key: '3e030bf889ea09510c26147d807a427d4a772d23' }, index.h(table.TableHeadRow, { key: 'c193117a1db06574c019922536a6982e4c6f09fb' }, this.paymentsTable.columnData.map((column) => column))), index.h(table.TableBody, { key: 'aa955b2adc05c02fbe7a6c693de4649e90855aba' }, index.h(table.TableLoadingState, { key: '35930a22ccdcc360e5e3f192c3fb140711508742', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), index.h(table.TableEmptyState, { key: '1582993843ac6661d2c5b62e07b1911ab940cb3c', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), index.h(table.TableErrorState, { key: '328f38cc95fb2f854865e4e05ace7e9ce8af8b69', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index$1) => (index.h(table.TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index$1], onClick: this.rowClickHandler }, data)))), this.paging && (index.h(table.TableFoot, { key: '0137371c7f1ab00f8ef3d27cebb30525eff6b659' }, index.h(table.TableFootRow, { key: '54ed0b9a13338b0bcefba282afe4f2de40e8f539' }, index.h(table.TableFootCell, { key: '6b98204f36a989fe9bd2bda65705de88098690c5', colSpan: this.paymentsTable.columnData.length }, index.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"]
     }; }
 };
 

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

@@ -1,23 +1,28 @@
 'use strict';
 
 var index = require('./index-p7cvUYAE.js');
-var payout_service = require('./payout.service-U7tm4CKf.js');
+var payout_service = require('./payout.service-BcQVsMCS.js');
 require('./config-state-BIgGhhe9.js');
 require('./dinero-BwNN_k7x.js');
-var Plaid = require('./Plaid-DAigb4JE.js');
+var Plaid = require('./Plaid-BlSGeGpn.js');
 require('./Pagination-Dediz133.js');
 require('./Business-oBifyXkW.js');
 require('./Dispute-CruQTF6_.js');
-var utils = require('./utils-CIjcxKu1.js');
-var utils$1 = require('./utils-8RGQVADu.js');
-var Analytics = require('./Analytics-D4AupIs5.js');
-var getPayoutCsv = require('./get-payout-csv-DDrtCacG.js');
-var checkPkgVersion = require('./check-pkg-version-Cl1JxnNX.js');
+var utils = require('./utils-DbTucCTO.js');
+var utils$1 = require('./utils-BHi4j5rB.js');
+var utils$2 = require('./utils-8RGQVADu.js');
+var Analytics = require('./Analytics-C1Wd9OW4.js');
+var payoutsStatus = require('./payouts-status-CwgOMz-S.js');
+var checkPkgVersion = require('./check-pkg-version-DMXmPDqZ.js');
+var button = require('./button-CR9Rl1-o.js');
+var styledHost = require('./styled-host-DAi5SuFa.js');
+require('./event-types-YOY5TKUN.js');
+var skeleton = require('./skeleton-DvRCiQlA.js');
+var badge = require('./badge-GBNtUypt.js');
 require('./Api-Bukk55YZ.js');
-require('./utils-BHi4j5rB.js');
 require('./index-W-zoNiyM.js');
 require('./parts-BXshb_S-.js');
-require('./package-BRuzzVG1.js');
+require('./package-CRaVpb0w.js');
 
 const makeGetPayoutDetails = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
     var _a;
@@ -48,21 +53,43 @@ const makeGetPayoutDetails = ({ id, authToken, service }) => async ({ onSuccess,
     }
 };
 
+const PayoutDetailsLoading = () => (index.h("div", { class: "row gap-3" }, index.h("div", { class: "col-12" }, index.h(skeleton.Skeleton, { width: "35%", height: "30px" })), index.h("div", { class: "col-12" }, index.h(skeleton.Skeleton, { width: "70%" })), index.h("div", { class: "col-12" }, index.h(skeleton.Skeleton, { width: "40%" })), index.h("div", { class: "col-12" }, index.h(skeleton.Skeleton, { width: "40%" })), index.h("div", { class: "col-12" }, index.h(skeleton.Skeleton, { width: "100%" })), index.h("div", { class: "col-12" }, index.h(skeleton.Skeleton, { width: "80%" }))));
+
 const JustifiPayoutDetails = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.errorEvent = index.createEvent(this, "error-event", 7);
+        this.recordClickEvent = index.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.checkPkgVersion();
         this.analytics = new Analytics.JustifiAnalytics(this);
         this.initializeServices();
+        if (this.getPayout) {
+            this.fetchData();
+        }
     }
     disconnectedCallback() {
         var _a;
@@ -72,6 +99,9 @@ const JustifiPayoutDetails = class {
     propChanged() {
         this.initializeServices();
     }
+    getPayoutWatcher() {
+        this.fetchData();
+    }
     initializeServices() {
         if (this.payoutId && this.authToken) {
             this.getPayout = makeGetPayoutDetails({
@@ -79,7 +109,7 @@ const JustifiPayoutDetails = class {
                 authToken: this.authToken,
                 service: new payout_service.PayoutService()
             });
-            this.getPayoutCSV = getPayoutCsv.makeGetPayoutCSV({
+            this.getPayoutCSV = payoutsStatus.makeGetPayoutCSV({
                 authToken: this.authToken,
                 service: new payout_service.PayoutService()
             });
@@ -93,15 +123,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 utils$1.capitalizeFirstLetter(deliveryMethod);
+    }
     render() {
-        if (this.errorMessage) {
-            return utils$1.ErrorState(this.errorMessage);
-        }
-        return (index.h("payout-details-core", { getPayout: this.getPayout, getPayoutCSV: this.getPayoutCSV, "onError-event": this.handleErrorEvent, enableRecordClick: this.enableRecordClick }));
+        var _a;
+        return (index.h(styledHost.StyledHost, { key: '83a5916c440ac2cc4efe216dd175c8816e23c815' }, this.loading && index.h(PayoutDetailsLoading, { key: 'd11ad391a3eaacc5dd6a9a0303d80f496955d369' }), !this.loading && this.errorMessage && utils$2.ErrorState(this.errorMessage), !this.loading && this.payout && (index.h("justifi-details", { key: 'a3be08ef5ad0882ec4a611aa597b0b69914cb560', errorMessage: this.errorMessage }, index.h(utils$2.EntityHeadInfo, { key: '4cea018e82c69b391a5dfc326d0ebb2aac43bcee', slot: "head-info", badge: (index.h("div", { class: "d-flex gap-1" }, payoutsStatus.MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), this.payout.settlement_priority === 'expedited' ? (index.h(badge.Badge, { variant: badge.BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : (index.h(badge.Badge, { variant: badge.BadgeVariant.SECONDARY, title: "Standard", text: "Standard" })))), title: this.payout.formattedPaymentAmount(this.payout.amount) }, index.h(utils$2.EntityHeadInfoItem, { key: '4f44184dcdf1313048d9a2ee5c9be928c1a2b5ef', classes: "border-1 border-end", title: "Updated At", value: `${utils$1.formatDate(this.payout.updated_at)} ${utils$1.formatTime(this.payout.updated_at)}` }), index.h(utils$2.EntityHeadInfoItem, { key: 'd6042bde890fcd4b8ff63856d53debf289ab6d2d', classes: "border-1 border-end", title: "Created At", value: `${utils$1.formatDate(this.payout.created_at)} ${utils$1.formatTime(this.payout.created_at)}` }), index.h(utils$2.EntityHeadInfoItem, { key: '2866ed7c297a0815bad29bfca699893ead3af6ca', title: "ID", value: this.payout.id }), index.h("div", { key: '1a7a105da3b0297f90c9a33fe76aa650c9c5aaa0', class: "m-4" }, index.h(button.Button, { key: '31d8cb414516d5b4244179e6e905cb0d6f4499fa', variant: "outline-secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), index.h("div", { key: '1c1c4896b3f2a0c463880c082fdb43fdd6996de3', slot: 'detail-sections' }, index.h(utils$2.DetailSectionTitle, { key: '481c8f87d29ba4583a40370415fd6f144a601462', sectionTitle: "Details" }), index.h("div", { key: '2f0f38440296dc01dee0fefab2b7f6a1bd04e4bf', class: "d-flex flex-column gap-2 w-100" }, index.h(utils$2.DetailItem, { key: 'd8fe26cee63860bc4e02ffad0e64834ea888d8e3', title: "Date paid", value: utils$1.formatDate(this.payout.deposits_at) }), index.h(utils$2.DetailItem, { key: 'd4a94c5ad5a78c41d314377316ce71db24b79db5', title: "Statement Description", value: this.payout.description }), index.h(utils$2.DetailItem, { key: 'fea138338da1c74d26dacfeaa15642962346658c', title: "Payout Method", value: this.formatMethod(this.payout.delivery_method) }), index.h(utils$2.DetailItem, { key: 'f77701ef18590ed73431614f421b9d76a9b83da6', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), index.h(utils$2.DetailItem, { key: 'af2401b0ad8b35f55283d74eae20fdf7ceea0b82', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), index.h(utils$2.DetailSectionTitle, { key: '96801f26f15e665e856262f65c0c6cea6f92bd9a', sectionTitle: "Account" }), index.h("div", { key: '54578f116a6b23c5c1dce11d450eb18be304ab65', class: "d-flex flex-column gap-2 w-100" }, index.h(utils$2.DetailItem, { key: 'fa8ab204001e4be0cf2aa71fa2f955532f1ac81c', title: "ID", value: this.payout.account_id, onClick: this.enableRecordClick ? () => this.handleRecordClick(this.payout.account_id) : undefined }), index.h(utils$2.DetailItem, { key: 'a0e1afcd7e7d86afb500cf876b7b61e74183f4c9', title: "Account Type", value: this.payout.bank_account.account_type }), index.h(utils$2.DetailItem, { key: '6b78025d11ac562f6950f07d3dc8e5c4041a236f', title: "Institution", value: this.payout.bank_account.account_type }), index.h(utils$2.DetailItem, { key: '93f4f6d947d1b621de0b1d2a24dbcf83e9c909ef', title: "Routing Number", value: this.payout.bank_account.routing_number }), index.h(utils$2.DetailItem, { key: 'cbe9a97153516dd2cbf6af4337179652d0f834ac', title: "Account Number", value: `**** ${this.payout.bank_account.account_number_last4}` })), this.payout.metadata && [
+            index.h(utils$2.DetailSectionTitle, { key: '706f2d164a736fb80a8c91018f61e7667eb12be6', sectionTitle: 'Metadata' }),
+            index.h("div", { key: '5be03b700c79d747899db7d9bee8a060c5de7894', class: "d-table gap-2 w-100" }, index.h(utils$2.CodeBlock, { key: '8dc3aa6522c59f7a5739eda61354bb1ac58ee3ac', metadata: this.payout.metadata }))
+        ])))));
     }
     static get watchers() { return {
         "payoutId": ["propChanged"],
-        "authToken": ["propChanged"]
+        "authToken": ["propChanged"],
+        "getPayout": ["getPayoutWatcher"]
     }; }
 };