@justifi/webcomponents 6.1.0-rc.2 → 6.1.0

package/dist/collection/components/payments-list/payments-list-filters.js

@@ -43,8 +43,8 @@ export class PaymentsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: 'ef06ca5d0df145fd2c7f82fb164a4098b1654e7c' }, h("table-filters-menu", { key: '32739ded26b3a11092e5237d363b5b280c859f0c', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: '2e123d80c45a92944811b9124e13f6cfc2e11cc0', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'd9e5facfe21e0896a4f0542a12592f11c54c0bc8', class: "p-2" }, h("form-control-text", { key: '084cec1084b8be08a5520891479aa4b4ab168ab7', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: 'c86027af0c49931a34e31e185cfc3c0d1093caf9', class: "p-2" }, h("form-control-text", { key: '694b5ddd5f90af1d73320cb6e29ce2e3aafce0b8', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: '4d2e5e1a0e76a58be68255e08a2a4f09dbbbc481', class: "p-2" }, h("form-control-select", { key: 'd4fa79604b6f9a390a63601001bc2ba8f8af425a', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status, disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: '54cc9fb98d5c0f6d96abb592d5e22c037634089c', class: "p-2" }, h("form-control-date", { key: '95001198266f09607e34d0c1fa5c1d0693b67b0a', 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: createdAfterPaymentsListFilterParam })), h("div", { key: '3510ccb63020969b2777c65ed82cfab9027dccd8', class: "p-2" }, h("form-control-date", { key: '428a3195efb976842c186aa0b4ec76ebfb1b7836', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: 'a7558557fc2568a6d2a1b440b421d534f62a6163' }, h("table-filters-menu", { key: '4e185e33a7835795b6858ec8419fc2ba8ab64a9d', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: '619b459dbd961cc2c5eb192f830f51f123f59604', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '53e8c53aa1f1aff0ecebc9ebb1f13bff2a053795', class: "p-2" }, h("form-control-text", { key: '04698a7742b278abbb720d4884f041509f5ac8ad', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: '967ef74a4642cfd758801e5f942a20fd7375fbe3', class: "p-2" }, h("form-control-text", { key: '3ca21f2ca7b45bba64a1d6d734be9beaf00c14fe', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: 'a5ec7ca0881d8d1bf2f0efa2c84270d3cd68832f', class: "p-2" }, h("form-control-select", { key: 'fd2d57c06e46ee77493ccfdc81927caa41c4d867', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status || '', disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: 'b272738dc727933cb4f21405ae222973aadde76d', class: "p-2" }, h("form-control-date", { key: '3cfb486fc05e023a3eb9960de13e0bbf2d179d79', 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: createdAfterPaymentsListFilterParam })), h("div", { key: '008a9c18830cadcf0da9d971077e8efd6ca9a714', class: "p-2" }, h("form-control-date", { key: 'a8805f485e37268df0897c6d5eff19e9c2324542', 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: createdBeforePaymentsListFilterParam }))))));
     }
     static get is() { return "justifi-payments-list-filters"; }
@@ -53,7 +53,6 @@ export class PaymentsListFilters {
         return {
             "paymentId": {
                 "type": "string",
-                "attribute": "payment-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -68,11 +67,11 @@ export class PaymentsListFilters {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "payment-id"
             },
             "terminalId": {
                 "type": "string",
-                "attribute": "terminal-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -87,11 +86,11 @@ export class PaymentsListFilters {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "terminal-id"
             },
             "paymentStatus": {
                 "type": "string",
-                "attribute": "payment-status",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -106,11 +105,11 @@ export class PaymentsListFilters {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "payment-status"
             },
             "createdAfter": {
                 "type": "string",
-                "attribute": "created-after",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -125,11 +124,11 @@ export class PaymentsListFilters {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "created-after"
             },
             "createdBefore": {
                 "type": "string",
-                "attribute": "created-before",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -144,7 +143,8 @@ export class PaymentsListFilters {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "created-before"
             }
         };
     }

package/dist/collection/components/payments-list/payments-list.js

@@ -46,7 +46,7 @@ export class PaymentsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '4cdd2e9a318226408d47198bf2de40a750a71d01' }, h("payments-list-core", { key: '87964c5dd33fd3b716964227cd990539d5d13fc4', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '0e82f9f2e71485299ef1bfe8dd9cf17ff79b9550' }, h("payments-list-core", { key: 'e1a808634458a378db3fb0021b786de65047e28c', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-payments-list"; }
     static get encapsulation() { return "shadow"; }
@@ -54,7 +54,6 @@ export class PaymentsList {
         return {
             "accountId": {
                 "type": "string",
-                "attribute": "account-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -69,11 +68,11 @@ export class PaymentsList {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "account-id"
             },
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -88,11 +87,11 @@ export class PaymentsList {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "columns": {
                 "type": "string",
-                "attribute": "columns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -108,6 +107,7 @@ export class PaymentsList {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "columns",
                 "defaultValue": "defaultColumnsKeys"
             }
         };

package/dist/collection/components/payments-list/payments-status.js

@@ -1,5 +1,18 @@
 import { h } from "@stencil/core";
 import { Badge, BadgeVariant } from "../../ui-components/badge/badge";
+export var PaymentStatusBadge;
+(function (PaymentStatusBadge) {
+    PaymentStatusBadge["SUCCEEDED"] = "succeeded";
+    PaymentStatusBadge["AUTHORIZED"] = "authorized";
+    PaymentStatusBadge["PENDING"] = "pending";
+    PaymentStatusBadge["ACH_FAILED"] = "achFailed";
+    PaymentStatusBadge["FAILED"] = "failed";
+    PaymentStatusBadge["CANCELED"] = "canceled";
+    PaymentStatusBadge["DISPUTED"] = "disputed";
+    PaymentStatusBadge["DISPUTE_LOST"] = "dispute_lost";
+    PaymentStatusBadge["FULLY_REFUNDED"] = "fully_refunded";
+    PaymentStatusBadge["PARTIALLY_REFUNDED"] = "partially_refunded";
+})(PaymentStatusBadge || (PaymentStatusBadge = {}));
 export const MapPaymentStatusToBadge = (status) => {
     const statusToBadgeProps = {
         succeeded: {
@@ -33,10 +46,15 @@ export const MapPaymentStatusToBadge = (status) => {
             text: 'Canceled',
         },
         disputed: {
-            variant: BadgeVariant.SECONDARY,
+            variant: BadgeVariant.WARNING,
             title: 'The account holder disputed this payment. The amount has been returned and a fee assessed.',
             text: 'Disputed',
         },
+        dispute_lost: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'The cardholder has won the dispute.',
+            text: 'Dispute Lost',
+        },
         fully_refunded: {
             variant: BadgeVariant.SECONDARY,
             title: 'The full amount of this payment has been refunded',

package/dist/collection/components/payments-list/payments-table.js

@@ -2,7 +2,22 @@ import { h } from "@stencil/core";
 import { MapPaymentStatusToBadge } from "./payments-status";
 import { convertToLocal } from "../../utils/utils";
 import { getAlternateTableCellPart, tableHeadCell } from "../../styles/parts";
-export const defaultColumnsKeys = 'created_at,amount,status,payment_type,description,payers_name,last_four_digits';
+export 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;
+};
+export const defaultColumnsKeys = 'created_at,amount,status,payment_type,description,payers_name,last_four_digits,card_brand';
 export 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")),
@@ -11,6 +26,7 @@ export const paymentTableColumns = {
     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")),
 };
 export 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 })))),
@@ -20,4 +36,8 @@ export const paymentTableCells = {
     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))));
+    },
 };

package/dist/collection/components/payout-details/payout-details-core.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { formatDate, formatTime } from "../../utils/utils";
+import { capitalizeFirstLetter, formatDate, formatTime } from "../../utils/utils";
 import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState } from "../../ui-components/details/utils";
 import { Button, StyledHost } from "../../ui-components";
 import { MapPayoutStatusToBadge } from "../payouts-list/payouts-status";
@@ -7,6 +7,7 @@ import PayoutDetailsLoading from "./payout-details-loading";
 import { Badge, BadgeVariant } from "../../ui-components/badge/badge";
 export class PayoutDetailsCore {
     constructor() {
+        this.enableRecordClick = false;
         this.loading = true;
         this.errorMessage = null;
         this.downloadCSV = () => {
@@ -22,6 +23,12 @@ export class PayoutDetailsCore {
                 },
             });
         };
+        this.handleRecordClick = (id) => {
+            this.recordClickEvent.emit({
+                id,
+                type: 'account'
+            });
+        };
     }
     componentWillLoad() {
         if (this.getPayout) {
@@ -50,11 +57,16 @@ export class PayoutDetailsCore {
             },
         });
     }
+    formatMethod(deliveryMethod) {
+        if (deliveryMethod === "ach")
+            return "ACH";
+        return capitalizeFirstLetter(deliveryMethod);
+    }
     render() {
         var _a;
-        return (h(StyledHost, { key: '142cd93a5538d48542c001dfaf8ecf0a8f0649e1' }, this.loading && h(PayoutDetailsLoading, { key: 'e4a301d09a48776c7cbc3c9b606e42558748301b' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '65c7a12cf23056d1940d08b0c3ff96368c601720', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'ef299affbf2facfb03f4af8f7d8933fb7cc0dac5', 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: '585d7d174f20f6b49e3fce34e0e236a89b90d083', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '6066bfdaef670375ae97453d84422228d2a5eead', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '7e526cbd6e31ca6139c8f31e7946749a59905fea', title: "ID", value: this.payout.id }), h("div", { key: 'eeeab1a03a0097c3c1be036d6f3f2a72dfb376dc', class: "m-4" }, h(Button, { key: 'ac90d236d37a925c157b99e1c348128bb0835060', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '3d01f52695bb407cba4a2166ebbd90d09580cbe9', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'ec7727a7c9a93bd51ae670f20c1453538676a95c', sectionTitle: "Details" }), h("div", { key: '469fad5f27810729811fba91c4a4275d27cbf18e', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '5f32a3e8631fdd2d047f5ccd933e200322d50de2', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '807284a840687b7257176366ff06f5150ba4a0ad', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '908464c42582f596e114c18f873ec3b3eac332ed', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '736b86cfb1cbfaad58e042e6a936db4237e5fbb7', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '919453e082a6f8534df07f3fd2cd0ffc6bf81539', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '7b033d532fa94ddb0a6e53861d126a50601f8bdf', sectionTitle: "Account" }), h("div", { key: '373c6745a0ab57d21fa88e9a470e63bd8c0ad999', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ea140c2b46fd503a85c97ec9cd5859fa8c0fc8e3', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'd94a8db9bdc0f5ab359e3cb7b9c0cfb1002db550', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '5317a5bef89080a7e70732025ab030674fcb79c3', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'f46e83995276c83361933381bc620336ef44f166', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '933aee12e24e152a5a8628f303b7c7e9709baf64', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
-            h(DetailSectionTitle, { key: '1e5233f88f9254c0a5525032470273e2f58ed59c', sectionTitle: 'Metadata' }),
-            h("div", { key: '63678c1f4eb207a4aced6f132e95c7cd646da9a3', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '7e5095e9be051524e8ab17ffe380b1315c5f7c98', metadata: this.payout.metadata }))
+        return (h(StyledHost, { key: 'd81fd85bbfa1c54175b4055cfed2eb62c7db1735' }, this.loading && h(PayoutDetailsLoading, { key: '37fca566131507232afc04332989545f81f21ace' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '2135970df52759def666f17297f055b90fc61274', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '12d9f81cea53ea7f8636c3ed249f994f13ae1389', 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: 'd3f061a66f4dd3bfee92e5de3b2ba8f245853c85', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '292267e98b0e12ef4fd365c0c972f9eccba0df09', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '0ca068bb4c8c2dea86feff59916b42871de799e7', title: "ID", value: this.payout.id }), h("div", { key: 'a97d286bf5eafce9cfbf81c6e7f62bb4e7b0849f', class: "m-4" }, h(Button, { key: '8a026a6f3819519815148115ffed876c18e37142', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '66520ccf02a84b4523552de31d43e2b5c75e16ae', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '27e9caef31af8e5d89141b5c0265e6ee9183809e', sectionTitle: "Details" }), h("div", { key: '2cb15bde0c567667978f482a55753c1355a359b9', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '5fe197ecc8f1aa79786a8da0092e7962095336a1', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '50d667f0b575e89b712832b3d70026c422119308', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '28f753d09ca0434ef6e913baa1c95e977657bdfe', title: "Payout Method", value: this.formatMethod(this.payout.delivery_method) }), h(DetailItem, { key: '84eb131bc5493293e75d0c5eb5cf69379769843d', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '0fd9fc497e076165b9e5a70b385fdde44d9290fb', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '29b8ef5d56c77bc44bf0809acf3bf7235a5f678d', sectionTitle: "Account" }), h("div", { key: '49104b277fe2c27a28326bc6e84aa76713f355a5', class: "d-flex flex-column gap-2 w-100" }, h(DetailItem, { key: '7e8f4b347227c73ebfb28a3846c994943dc22b14', title: "ID", value: this.payout.account_id, onClick: this.enableRecordClick ? () => this.handleRecordClick(this.payout.account_id) : undefined }), h(DetailItem, { key: '594d4853374fdacde8c38c9409abe593acf3d1d8', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '86198dd9f123775d687df6a7efa7b17fae6f7fc0', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'ff5840da92dc48469915698937c52be1be6573f3', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'dae3be8251b99e92c14d19151f7fcf43e7d79d2b', title: "Account Number", value: `**** ${this.payout.bank_account.account_number_last4}` })), this.payout.metadata && [
+            h(DetailSectionTitle, { key: 'ab9280b8f08bfa10492d86d73d7fcc054602c23b', sectionTitle: 'Metadata' }),
+            h("div", { key: '91326afd6edbd573802684fa8518d6738cbcf4ff', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '7ac4be5f733114b2257eade5c315583b09643390', metadata: this.payout.metadata }))
         ])))));
     }
     static get is() { return "payout-details-core"; }
@@ -62,7 +74,6 @@ export class PayoutDetailsCore {
         return {
             "getPayout": {
                 "type": "unknown",
-                "attribute": "get-payout",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -85,7 +96,6 @@ export class PayoutDetailsCore {
             },
             "getPayoutCSV": {
                 "type": "unknown",
-                "attribute": "get-payout-c-s-v",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -105,6 +115,26 @@ export class PayoutDetailsCore {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "enableRecordClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-record-click",
+                "defaultValue": "false"
             }
         };
     }
@@ -137,6 +167,27 @@ export class PayoutDetailsCore {
                         }
                     }
                 }
+            }, {
+                "method": "recordClickEvent",
+                "name": "record-click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "RecordClickEvent",
+                    "resolved": "RecordClickEvent",
+                    "references": {
+                        "RecordClickEvent": {
+                            "location": "import",
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::RecordClickEvent"
+                        }
+                    }
+                }
             }];
     }
     static get watchers() {

package/dist/collection/components/payout-details/payout-details.js

@@ -8,6 +8,7 @@ import { makeGetPayoutCSV } from "./get-payout-csv";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 export class PayoutDetails {
     constructor() {
+        this.enableRecordClick = false;
         this.errorMessage = null;
         this.handleErrorEvent = (event) => {
             this.errorMessage = event.detail.message;
@@ -52,7 +53,7 @@ export class PayoutDetails {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h("payout-details-core", { getPayout: this.getPayout, getPayoutCSV: this.getPayoutCSV, "onError-event": this.handleErrorEvent }));
+        return (h("payout-details-core", { getPayout: this.getPayout, getPayoutCSV: this.getPayoutCSV, "onError-event": this.handleErrorEvent, enableRecordClick: this.enableRecordClick }));
     }
     static get is() { return "justifi-payout-details"; }
     static get encapsulation() { return "shadow"; }
@@ -60,7 +61,6 @@ export class PayoutDetails {
         return {
             "payoutId": {
                 "type": "string",
-                "attribute": "payout-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -75,11 +75,11 @@ export class PayoutDetails {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "payout-id"
             },
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -94,7 +94,28 @@ export class PayoutDetails {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
+            },
+            "enableRecordClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-record-click",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/payout-transactions-list/payout-transactions-list.js

@@ -95,7 +95,7 @@ export class PayoutTransactionsList {
         return Object.assign({ payout_id: this.payoutId, limit: '15' }, this.pagingParams);
     }
     render() {
-        return (h(StyledHost, { key: 'f795f89fe39f8cded7f0d9c671df8e3e86de6f03' }, h(TableWrapper, { key: '5bb5f805a78965068f675012a1a491e5dd3d4416' }, h(TableComponent, { key: 'c75e72fb5bde6b3f8f127be4d76ef1fa66ce6781' }, h(TableHead, { key: '3dfb03ed0205f6fff21953e0a4c85e8b151680a1' }, h(TableHeadRow, { key: '169156e61bdf1ce6e10b89c660526a7ec9efb860' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '1e59e340e98ace8291acfbe26836e5b2b7b7dd29' }, h(TableLoadingState, { key: '3c1a420d293d24ac9434f034c7e6de7a83698b63', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '2038ebb6ff5480d74b0bb6a6ecf31a9531f606ef', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '48582c83e384b4e5ba81c4d0055dc9e727a81cdd', 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: '0bb2c1f4085278db7b114c8b9c5a11702a1840d1' }, h(TableFootRow, { key: '2cc9fe5d66b433b392da1e0a1ae265db6404002d' }, h(TableFootCell, { key: 'cb21e30d68c92758efa03fbd16509ff28ab5e316', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: 'e5ac8aa63ddb08d7f70976cfceccbadab3b8efa9', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: 'a0ff80867bc3c0bf198165229f693d7748ffc7a4' }, h(TableWrapper, { key: '779cc5602f6221e0f704484bf962b72b266d95f8' }, h(TableComponent, { key: '7b4b56e9712533ba2b50a875d282ef4bd5efdcaf' }, h(TableHead, { key: '8ecd93d56bdbdb1417b260dd013315b21958f363' }, h(TableHeadRow, { key: '9fa0fea238a9f76c71d5b8fc5443ca2c9e56b13b' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: 'f7d94388eddaf848e4868005e985a1158577c70f' }, h(TableLoadingState, { key: 'c83742e9e3ecbcdaba29f2aa121ec4c101a55632', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: 'fa0404328357e11527cff2c3eb15536ee458557b', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '71add0ef95310fd49e403d65c2a23ea8f73c71b6', 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: '073af8dce5dabb2db604ae50e6ace6a4ace18e6f' }, h(TableFootRow, { key: '3f3906a106b3c41311a0e1309aea779e865bf0f5' }, h(TableFootCell, { key: '85b46ef2a297aab3a450d49dd086ec6e7e1ab027', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '548131521a5fcf1562b286097635f5f62414a28c', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "justifi-payout-transactions-list"; }
     static get encapsulation() { return "shadow"; }
@@ -103,7 +103,6 @@ export class PayoutTransactionsList {
         return {
             "payoutId": {
                 "type": "string",
-                "attribute": "payout-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -118,11 +117,11 @@ export class PayoutTransactionsList {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "payout-id"
             },
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -137,11 +136,11 @@ export class PayoutTransactionsList {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "columns": {
                 "type": "string",
-                "attribute": "columns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -157,6 +156,7 @@ export class PayoutTransactionsList {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "columns",
                 "defaultValue": "defaultColumnsKeys"
             }
         };

package/dist/collection/components/payouts-list/payouts-list-core.js

@@ -135,14 +135,13 @@ export class PayoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '503793db2fd72d3854bfa1eba2051bc822000a1a' }, h(TableComponent, { key: '1db195f7f1206bef7236ccd814c464c61b12f3d3' }, h(TableHead, { key: 'a61137a34fddf3f854102ec7a2964f127d7555f9' }, h(TableHeadRow, { key: '3d3c330e5758ccb4aa14bb7b5ae993d8d2c1718e' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'a483803ea8dd9db844f36f9f8c7a89e81d7322b4' }, h(TableLoadingState, { key: '10bee5e971e10b0313b9b411c292f8f65bf1cf82', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'c8ec9f17a98baa81b4b1830eb8d0bfad45cc8ee1', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '94cd786053173ce22f797b0da263488cab9b5139', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '533bb1571ae70a03f60d13d5742296f425512919' }, h(TableFootRow, { key: '15924c92e5c9f2202066ebfa02aebc2c52fccee3' }, h(TableFootCell, { key: '48bd284c90d4ac044b5fd5f323c90fab5e9fdb5d', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'cfc4bc6b077267ced59bf8b2519ee0354e676560', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '44f6c2c3a44435f30c61220114797c5938e475a8' }, h(TableComponent, { key: '756c4ea4ad9c59bea1241af2502c03ced6ec3623' }, h(TableHead, { key: '2748d99edcaea098b111954178cf799811be445c' }, h(TableHeadRow, { key: 'c824617152c899cdff946f979ac71dbdb8002ffa' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: '4ae6368c8a634f0a1aa85117a2ead0dd66f9828c' }, h(TableLoadingState, { key: 'f6473742b82e604808474cf294aca1f09bcf820f', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '334eef7d28de693a0c5e4f413c72268acf00bc6d', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '6172568fd0282924413cbf28255d06f1651bcdbe', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '232dad4bfb95c707989633a1c0c198481aa3a5e1' }, h(TableFootRow, { key: '1bb1da49bef435aec118bc8c8eb5a96c0469f817' }, h(TableFootCell, { key: '481a46c6488f8652f6360725b45ec76baecc6ad4', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'd4fdb00ff58d674f77d99502d98c572562f516ea', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "payouts-list-core"; }
     static get properties() {
         return {
             "getPayouts": {
                 "type": "unknown",
-                "attribute": "get-payouts",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -165,7 +164,6 @@ export class PayoutsListCore {
             },
             "getSubAccounts": {
                 "type": "unknown",
-                "attribute": "get-sub-accounts",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -188,7 +186,6 @@ export class PayoutsListCore {
             },
             "getPayoutCSV": {
                 "type": "unknown",
-                "attribute": "get-payout-c-s-v",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -211,7 +208,6 @@ export class PayoutsListCore {
             },
             "columns": {
                 "type": "string",
-                "attribute": "columns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -226,7 +222,8 @@ export class PayoutsListCore {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "columns"
             }
         };
     }

package/dist/collection/components/payouts-list/payouts-list-filters.js

@@ -26,8 +26,8 @@ export class PayoutsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '83debaafb73e9143b6e2e7804f69c4124845d01e' }, h("table-filters-menu", { key: '162c3af697cef40e2a93c7e0245ec4d7d385f361', params: filterMenuParams, clearParams: clearParams, part: payoutsListFilterMenu }, h("div", { key: '7e118d535a6bed14a1ea6e7ed920fd682bbd3705', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'dfd557f8d5a3f834bbaa5164ef2c1e7d3c19adcc', class: "p-2" }, h("form-control-date", { key: '01d9e16489abce36d4f770c4c06912923026860f', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDate: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDate: true }), disabled: !!this.createdAfter, part: createdAfterPayoutsListFilterParam })), h("div", { key: '9e7167618cc737911056c9217dc6a1ca77c1f41b', class: "p-2" }, h("form-control-date", { key: 'd80e6e2ebda1cd8f290daff21908f7dba1af2d7a', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDate: true }) ||
+        return (h(StyledHost, { key: '41eeb0429b0228f59f50b82fa8433dedacf56aed' }, h("table-filters-menu", { key: '10b29c5ab84d582867e7d58dae927ffceb20bf63', params: filterMenuParams, clearParams: clearParams, part: payoutsListFilterMenu }, h("div", { key: '9f1a6b6409b06c3b8c44f513834f9ff4b8c97657', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '886691c037614a7623b78b0b4010fc539b7a0e94', class: "p-2" }, h("form-control-date", { key: 'b6553e03f27a2a65d241e679515cf1e1ecf3ebb8', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDate: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDate: true }), disabled: !!this.createdAfter, part: createdAfterPayoutsListFilterParam })), h("div", { key: '7609b6996b9e1dfab4c20bb68cde950cfea42442', class: "p-2" }, h("form-control-date", { key: '118337c44913278ccc71e833a8afdb1d61071592', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDate: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDate: true }), disabled: !!this.createdBefore, part: createdBeforePayoutsListFilterParam }))))));
     }
     static get is() { return "justifi-payouts-list-filters"; }
@@ -36,7 +36,6 @@ export class PayoutsListFilters {
         return {
             "createdAfter": {
                 "type": "string",
-                "attribute": "created-after",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -51,11 +50,11 @@ export class PayoutsListFilters {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "created-after"
             },
             "createdBefore": {
                 "type": "string",
-                "attribute": "created-before",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -70,7 +69,8 @@ export class PayoutsListFilters {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "created-before"
             }
         };
     }

package/dist/collection/components/payouts-list/payouts-list.js

@@ -64,7 +64,7 @@ export class PayoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '73ac65b309e80186e0f7799385d012e91ceb1b8b' }, h("payouts-list-core", { key: 'f7767376f3155521445cb2ee48b9a20c362c8137', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
+        return (h(StyledHost, { key: 'fb8e3e21a4e5a0aa971a91eed4ef0b603dbd1b23' }, h("payouts-list-core", { key: 'c9fb97bd0d77d1989f346285cd5124121ad4ac83', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
     }
     static get is() { return "justifi-payouts-list"; }
     static get encapsulation() { return "shadow"; }
@@ -72,7 +72,6 @@ export class PayoutsList {
         return {
             "accountId": {
                 "type": "string",
-                "attribute": "account-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -87,11 +86,11 @@ export class PayoutsList {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "account-id"
             },
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -106,11 +105,11 @@ export class PayoutsList {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "columns": {
                 "type": "string",
-                "attribute": "columns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -126,6 +125,7 @@ export class PayoutsList {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "columns",
                 "defaultValue": "defaultColumnsKeys"
             }
         };