@justifi/webcomponents 6.12.1-rc.5 → 6.12.2

package/dist/esm/justifi-order-terminals.entry.js

@@ -1,23 +1,23 @@
 import { h, r as registerInstance, c as createEvent } from './index-CV0Pyo1O.js';
-import { a9 as heading5, a8 as heading4, a3 as buttonPrimary, t as text } from './parts-D50Rx76J.js';
+import { a9 as heading5, a8 as heading4, a1 as buttonPrimary, t as text } from './parts-DnrawQn3.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
 import './event-types-CZfYo5-1.js';
-import { c as checkPkgVersion } from './check-pkg-version-C1z6CAOx.js';
-import { J as JustifiAnalytics } from './Analytics-BCoK2BKE.js';
-import { m as TerminalModel, C as ComponentErrorSeverity, l as TerminalOrder, d as TerminalOrderType, a as ComponentErrorCodes } from './Plaid-BMnuSHeX.js';
-import { B as BusinessService } from './business.service-D47BEQPH.js';
+import { c as checkPkgVersion } from './check-pkg-version-BJtCbzf9.js';
+import { J as JustifiAnalytics } from './Analytics-qafLCOEU.js';
+import { m as TerminalModel, C as ComponentErrorSeverity, k as TerminalOrder, c as TerminalOrderType, e as ComponentErrorCodes } from './Plaid-BuKEVgbB.js';
+import { B as BusinessService } from './business.service-BPbZ5fxQ.js';
 import { B as Business } from './Business-BcNb9bVO.js';
-import { m as makeGetBusiness } from './get-business-BsjvgFCj.js';
-import { S as Skeleton } from './skeleton-DV6yJalo.js';
+import { m as makeGetBusiness } from './get-business-DpFRs5dE.js';
+import { S as Skeleton } from './skeleton-CXGFVqDf.js';
 import './config-state-kKn89dp1.js';
 import './dinero-HXpYMWUU.js';
 import './Pagination-CLHwhyvu.js';
 import './Dispute-BH0Xfn-F.js';
-import { g as getErrorCode, a as getErrorMessage } from './utils-DtiRLISl.js';
-import { T as TerminalService } from './terminal.service-0AO0m5oh.js';
-import { l as formatPhoneNumber } from './utils-De6tr4ug.js';
-import './package-DbJ8_F44.js';
-import './Api-BrYhtpEh.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils-DcfpJGDZ.js';
+import { T as TerminalService } from './terminal.service-0oISl5j-.js';
+import { l as formatPhoneNumber } from './utils-BTtxWI2r.js';
+import './package-BCgsLInF.js';
+import './Api-DMd8hTI-.js';
 import './index-cDVGjRkU.js';
 
 const FormBlock = () => (h("div", { class: "row gap-3" }, h("div", { class: "col-12" }, h(Skeleton, { width: "25%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "100%" })), h("div", { class: "col-12 d-flex gap-3" }, h(Skeleton, { width: "50%" }), h(Skeleton, { width: "50%" })), h("div", { class: "col-12 d-flex gap-3" }, h(Skeleton, { width: "65%" }), h(Skeleton, { width: "35%" }))));
@@ -201,7 +201,7 @@ const JustifiOrderTerminals = class {
         return (h("div", { class: "mt-3" }, h("div", { class: "text-end" }, "Order limit: ", this.orderLimit), h("div", { class: "d-flex justify-content-end mt-3" }, h("button", { class: "btn btn-primary submit-btn", onClick: this.submitOrder.bind(this), disabled: this.order.totalQuantity === 0 || this.submitting, part: buttonPrimary }, this.submitting ? 'Submitting...' : this.submitButtonText))));
     }
     render() {
-        return (h(StyledHost, { key: '383551442ee3c73ff4df3ffcca06f9c98519ee1a' }, h("div", { key: 'acc977cf9e43949c0c33c25ee9a4d449c5ece404', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
+        return (h(StyledHost, { key: '1dc7e86cd02a1d549ee19b6e24dec5278af70e44' }, h("div", { key: 'a6c3f18e4ad62606aa04c9a71ff4c949a6cc407f', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
     }
 };
 

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

@@ -1,39 +1,35 @@
-import { r as registerInstance, c as createEvent, h } from './index-CV0Pyo1O.js';
-import { P as PaymentService } from './payment.service-C6ebnLOw.js';
-import { m as makeGetPaymentDetails } from './get-payment-details-Br1249qD.js';
-import { E as ErrorState } from './utils-DJOBwFeP.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid-BMnuSHeX.js';
-import { J as JustifiAnalytics } from './Analytics-BCoK2BKE.js';
-import { c as checkPkgVersion } from './check-pkg-version-C1z6CAOx.js';
-import './Api-BrYhtpEh.js';
+import { h, r as registerInstance, c as createEvent } from './index-CV0Pyo1O.js';
+import { P as PaymentService } from './payment.service-Ckbb7gXA.js';
+import { m as makeGetPaymentDetails } from './get-payment-details-DjBou5Fu.js';
+import { C as ComponentErrorSeverity, e as ComponentErrorCodes, g as PaymentStatuses } from './Plaid-BuKEVgbB.js';
+import { J as JustifiAnalytics } from './Analytics-qafLCOEU.js';
+import { c as checkPkgVersion } from './check-pkg-version-BJtCbzf9.js';
 import './config-state-kKn89dp1.js';
-import './index-cDVGjRkU.js';
-import './utils-De6tr4ug.js';
-import './dinero-HXpYMWUU.js';
+import { b as formatDate, d as formatTime, s as snakeCaseToHumanReadable } from './utils-BTtxWI2r.js';
 import './Pagination-CLHwhyvu.js';
 import './Business-BcNb9bVO.js';
-import './Dispute-BH0Xfn-F.js';
-import './utils-DtiRLISl.js';
-import './parts-D50Rx76J.js';
-import './package-DbJ8_F44.js';
+import { a as DisputeStatus } from './Dispute-BH0Xfn-F.js';
+import { P as PaymentStatusBadge, M as MapPaymentStatusToBadge } from './payments-status-BIDoGw-m.js';
+import { a as EntityHeadInfo, b as EntityHeadInfoItem, D as DetailSectionTitle, c as DetailItem, C as CodeBlock, E as ErrorState } from './utils-BxYS3WDw.js';
+import { S as StyledHost } from './styled-host-D6byRazK.js';
+import './event-types-CZfYo5-1.js';
+import { S as Skeleton } from './skeleton-CXGFVqDf.js';
+import { a as Badge, B as BadgeVariant } from './badge-B6dp1XGV.js';
+import './Api-DMd8hTI-.js';
+import './dinero-HXpYMWUU.js';
+import './utils-DcfpJGDZ.js';
+import './package-BCgsLInF.js';
+import './index-cDVGjRkU.js';
+import './parts-DnrawQn3.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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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();
@@ -55,6 +51,7 @@ const JustifiPaymentDetails = class {
                 authToken: this.authToken,
                 service: new PaymentService()
             });
+            this.fetchData();
         }
         else {
             this.errorMessage = 'Payment ID and Auth Token are required';
@@ -65,15 +62,57 @@ const JustifiPaymentDetails = class {
             });
         }
     }
-    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"]
     }; }
 };
 

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

@@ -1,26 +1,26 @@
 import { h, r as registerInstance, c as createEvent } from './index-CV0Pyo1O.js';
-import { J as JustifiAnalytics } from './Analytics-BCoK2BKE.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid-BMnuSHeX.js';
-import { m as makeGetBusiness, b as makePostProvisioning } from './payment-provisioning-actions-B6LHK2Ka.js';
-import { B as BusinessService } from './business.service-D47BEQPH.js';
-import { A as Api } from './Api-BrYhtpEh.js';
+import { J as JustifiAnalytics } from './Analytics-qafLCOEU.js';
+import { C as ComponentErrorSeverity, e as ComponentErrorCodes } from './Plaid-BuKEVgbB.js';
+import { m as makeGetBusiness, b as makePostProvisioning } from './payment-provisioning-actions-Dr0YIShV.js';
+import { B as BusinessService } from './business.service-BPbZ5fxQ.js';
+import { A as Api } from './Api-DMd8hTI-.js';
 import './Pagination-CLHwhyvu.js';
 import { C as CountryCode, B as Business, c as checkProvisioningStatus } from './Business-BcNb9bVO.js';
 import './Dispute-BH0Xfn-F.js';
-import { c as checkPkgVersion } from './check-pkg-version-C1z6CAOx.js';
-import { j as isTokenExpired } from './utils-De6tr4ug.js';
-import { t as text } from './parts-D50Rx76J.js';
+import { c as checkPkgVersion } from './check-pkg-version-BJtCbzf9.js';
+import { i as isTokenExpired } from './utils-BTtxWI2r.js';
+import { t as text } from './parts-DnrawQn3.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
-import { H as Header1 } from './header-1-bRxxOyI-.js';
+import { H as Header1 } from './header-1-Bl7MHW0w.js';
 import './event-types-CZfYo5-1.js';
 import { B as BusinessFormClickActions } from './event-types-XYgDHrVL.js';
-import { P as PaymentProvisioningLoading } from './payment-provisioning-loading-BAoIyEOj.js';
-import './package-DbJ8_F44.js';
-import './utils-DtiRLISl.js';
+import { P as PaymentProvisioningLoading } from './payment-provisioning-loading-DI2wDkhm.js';
+import './package-BCgsLInF.js';
+import './utils-DcfpJGDZ.js';
 import './config-state-kKn89dp1.js';
 import './index-cDVGjRkU.js';
 import './dinero-HXpYMWUU.js';
-import './skeleton-DV6yJalo.js';
+import './skeleton-CXGFVqDf.js';
 
 const api = Api();
 class ProvisionService {
@@ -108,7 +108,9 @@ const JustifiPaymentProvisioning = class {
             }
         };
         this.decrementSteps = () => {
-            return this.currentStep--;
+            if (this.currentStep > 0) {
+                this.currentStep -= 1;
+            }
         };
         this.previousStepButtonOnClick = () => {
             this.clickEvent.emit({ name: BusinessFormClickActions.previousStep });

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

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

@@ -1,10 +1,10 @@
 import { r as registerInstance, h } from './index-CV0Pyo1O.js';
 import { l as lodashExports } from './lodash-CrGKVSPp.js';
 import { f as filterParams, p as propsParams, c as clearParams } from './payments-list-params-state-CiGfmyWW.js';
-import { f as filterMenu, a as filterParam } from './parts-D50Rx76J.js';
+import { f as filterMenu, a as filterParam } from './parts-DnrawQn3.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
 import './event-types-CZfYo5-1.js';
-import { c as convertToUTC, a as convertToLocal } from './utils-De6tr4ug.js';
+import { c as convertToUTC, a as convertToLocal } from './utils-BTtxWI2r.js';
 import './_commonjsHelpers-BFTU3MAI.js';
 import './index-cDVGjRkU.js';
 import './dinero-HXpYMWUU.js';
@@ -60,8 +60,8 @@ const JustifiPaymentsListFilters = class {
     }
     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 }))))));
     }
 };

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

@@ -1,24 +1,26 @@
-import { r as registerInstance, c as createEvent, h } from './index-CV0Pyo1O.js';
-import { P as PaymentService } from './payment.service-C6ebnLOw.js';
+import { h, r as registerInstance, c as createEvent } from './index-CV0Pyo1O.js';
+import { P as PaymentService } from './payment.service-Ckbb7gXA.js';
 import './config-state-kKn89dp1.js';
 import './dinero-HXpYMWUU.js';
-import { c as Payment, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid-BMnuSHeX.js';
-import './Pagination-CLHwhyvu.js';
+import { b as Payment, C as ComponentErrorSeverity, e as ComponentErrorCodes } from './Plaid-BuKEVgbB.js';
+import { p as pagingDefaults } from './Pagination-CLHwhyvu.js';
 import './Business-BcNb9bVO.js';
 import './Dispute-BH0Xfn-F.js';
-import { g as getErrorCode, a as getErrorMessage } from './utils-DtiRLISl.js';
-import { J as JustifiAnalytics } from './Analytics-BCoK2BKE.js';
-import { c as checkPkgVersion } from './check-pkg-version-C1z6CAOx.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils-DcfpJGDZ.js';
+import { J as JustifiAnalytics } from './Analytics-qafLCOEU.js';
+import { c as checkPkgVersion } from './check-pkg-version-BJtCbzf9.js';
 import { S as StyledHost } from './styled-host-D6byRazK.js';
-import './event-types-CZfYo5-1.js';
-import { d as defaultColumnsKeys } from './payments-table-n1VrIKIR.js';
-import './Api-BrYhtpEh.js';
-import './utils-De6tr4ug.js';
+import { T as Table, l as TableWrapper, a as TableComponent, b as TableHead, c as TableHeadRow, d as TableBody, e as TableLoadingState, f as TableEmptyState, g as TableErrorState, h as TableRow, i as TableFoot, j as TableFootRow, k as TableFootCell } from './table-CcyuIutB.js';
+import { T as TableClickActions } from './event-types-CZfYo5-1.js';
+import { M as MapPaymentStatusToBadge } from './payments-status-BIDoGw-m.js';
+import { a as convertToLocal } from './utils-BTtxWI2r.js';
+import { a3 as tableHeadCell, a4 as getAlternateTableCellPart } from './parts-DnrawQn3.js';
+import { o as onQueryParamsChange, g as getRequestParams } from './payments-list-params-state-CiGfmyWW.js';
+import './Api-DMd8hTI-.js';
 import './index-cDVGjRkU.js';
-import './package-DbJ8_F44.js';
-import './payments-status-7P7L51CK.js';
-import './badge-B_DdhQ3Q.js';
-import './parts-D50Rx76J.js';
+import './package-BCgsLInF.js';
+import './spinner-kSw6PcwU.js';
+import './badge-B6dp1XGV.js';
 
 const makeGetPayments = ({ id, authToken, service }) => async ({ params, onSuccess, onError, final }) => {
     var _a, _b;
@@ -52,21 +54,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: () => (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 = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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 +143,9 @@ const JustifiPaymentsList = class {
     propChanged() {
         this.initializeGetPayments();
     }
+    updateOnPropChange() {
+        this.fetchData();
+    }
     initializeGetPayments() {
         if (this.accountId && this.authToken) {
             this.getPayments = makeGetPayments({
@@ -93,12 +163,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 = 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"]
     }; }
 };