@justifi/webcomponents 5.0.0 → 5.1.0

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

@@ -1,23 +1,53 @@
+import { h } from "@stencil/core";
+import { Badge, BadgeVariant } from "../../ui-components/badge/badge";
 export const MapPaymentStatusToBadge = (status) => {
-    switch (status) {
-        case 'succeeded':
-            return "<span class='badge bg-success' title='This payment was successfully captured'>Succeeded</span>";
-        case 'authorized':
-            return "<span class='badge bg-primary' title='This card payment was authorized, but not captured. It could still succeed or fail.'>Authorized</span>";
-        case 'pending':
-            return "<span class='badge bg-primary' title='This ACH payment was processed, but the funds have not settled. It could still succeed or fail.'>Pending</span>";
-        case 'achFailed':
-            return "<span class='badge bg-danger' title='The funds couldn't be collected for this ACH payment (in addition to the original payment, an ACH return and fee will appear in a payout)'>Failed</span>";
-        case 'failed':
-            return "<span class='badge bg-danger' title='This card payment did not go through (it will not appear in a payout)'>Failed</span>";
-        case 'canceled':
-            return "<span class='badge bg-danger' title='This payment was canceled'>Canceled</span>";
-        case 'disputed':
-            return "<span class='badge bg-secondary' title='The account holder disputed this payment. The amount has been returned and a fee assessed.'>Disputed</span>";
-        case 'fully_refunded':
-            return "<span class='badge bg-secondary' title='The full amount of this payment has been refunded'>Fully Refunded</span>";
-        case 'partially_refunded':
-            return "<span class='badge bg-secondary' title='A portion of this payment has been refunded'>Partially Refunded</span>";
-    }
-    ;
+    const statusToBadgeProps = {
+        succeeded: {
+            variant: BadgeVariant.SUCCESS,
+            title: 'This payment was successfully captured',
+            text: 'Succeeded',
+        },
+        authorized: {
+            variant: BadgeVariant.PRIMARY,
+            title: 'This card payment was authorized, but not captured. It could still succeed or fail.',
+            text: 'Authorized',
+        },
+        pending: {
+            variant: BadgeVariant.PRIMARY,
+            title: 'This ACH payment was processed, but the funds have not settled. It could still succeed or fail.',
+            text: 'Pending',
+        },
+        achFailed: {
+            variant: BadgeVariant.DANGER,
+            title: 'The funds couldn\'t be collected for this ACH payment (in addition to the original payment, an ACH return and fee will appear in a payout)',
+            text: 'ACH Failed',
+        },
+        failed: {
+            variant: BadgeVariant.DANGER,
+            title: 'This card payment did not go through (it will not appear in a payout)',
+            text: 'Failed',
+        },
+        canceled: {
+            variant: BadgeVariant.DANGER,
+            title: 'This payment was canceled',
+            text: 'Canceled',
+        },
+        disputed: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'The account holder disputed this payment. The amount has been returned and a fee assessed.',
+            text: 'Disputed',
+        },
+        fully_refunded: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'The full amount of this payment has been refunded',
+            text: 'Fully Refunded',
+        },
+        partially_refunded: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'A portion of this payment has been refunded',
+            text: 'Partially Refunded',
+        },
+    };
+    const badgeProps = statusToBadgeProps[status];
+    return h(Badge, Object.assign({}, badgeProps));
 };

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { MapPaymentStatusToBadge } from "./payments-status";
-import { formatCurrency, convertToLocal } from "../../utils/utils";
+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 paymentTableColumns = {
@@ -13,11 +13,11 @@ export const paymentTableColumns = {
     last_four_digits: () => (h("th", { part: tableHeadCell, scope: "col", title: "The brand and last 4 digits of the payment method" }, "Payment Method")),
 };
 export const paymentTableCells = {
-    created_at: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(value, { showDisplayDate: true })), h("div", { class: "fw-bold" }, convertToLocal(value, { showTime: true })))),
-    amount: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value, true, true))),
-    status: (value, index) => (h("td", { part: getAlternateTableCellPart(index), innerHTML: MapPaymentStatusToBadge(value) })),
-    payment_type: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    description: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    payers_name: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    last_four_digits: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value))
+    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)),
 };

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

@@ -1,10 +1,9 @@
 import { h } from "@stencil/core";
-import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
+import { 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";
-import Spinner from "../../ui-components/spinner";
-import { badge } from "../../styles/parts";
+import PayoutDetailsLoading from "./payout-details-loading";
 export class PayoutDetailsCore {
     constructor() {
         this.downloadCSV = () => {
@@ -55,7 +54,7 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '00dce2f3bddb29647880b82a2055580346b7ff38' }, this.loading && h(Spinner, { key: 'de524e2f77fb4dd20f4fcb7dff41f256f3ee74b5' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'c0b7449ff0e5773be97fb27485638acdce79b50a', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '1aa8719fb989c9993ac30803440d16ce3590038e', slot: "head-info", badge: h("span", { slot: 'badge', part: badge, innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '30c9240747e66e38056cd870e5703b4d027b3ea2', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '2d93c5594c1451a3d566afe0431da34994ccc94a', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'd9116166e2c7f95e8a7e110146f492bf0329e01e', title: "ID", value: this.payout.id }), h("div", { key: '9b3c12058b396637632c3d46a24ed426a1bd518c', class: "m-4" }, h(Button, { key: 'eaf5339cb60b3ae759b0ca94ffb07f20f044feec', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '61372b0167f0a07231fd1cf69d61f156e42c3a0a', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '6113095a35b746b7b03e15af9e195fe7247148c0', sectionTitle: "Details" }), h("div", { key: 'dcdc2cf2c73516e603492aae6f81a12a2dd10d1f', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '797cf1e1b4a0521ff01a8c985c260b998ad3d3e9', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'bd3162d95fa4a98e2db4e42a9de39c91ca209b45', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'adef2b9dcbad873f570530761cf887c9a4efa052', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '8c6ca766f17f9dd140fa0778fecd648a72244b92', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '4c4448677902c19011cf36b0d71d85eb54083bbf', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '7f4a0ed8518b957cbfcfb15e5ea62963e5ba5013', sectionTitle: "Account" }), h("div", { key: '3d878a54ddffb40e55610224fc97f182f4255e51', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'd9eb8870ca1b4bf0c04bcb2f3b4362ebf9712a88', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'f320a0fb646a5352173341083f384bd6d7a30a61', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '35cc07ec9ee8e3155606851eeb9864d9f6df6e05', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'ac0962b80347b619e4cc534781df397d9bc510e2', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '65db983d9504b912f12cefc7eea7a5bc8e9f3d73', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'bc94a109cf5e2c4dcd32972387a4b167b85d8ccc', sectionTitle: 'Metadata' }), h("div", { key: '1918677f3559ff779b3f1613ee9b2367110f4648', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '2b5dd103cebe0960bdcc6a68f7389780e9d1029b', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: 'ace7565dae883381e2668214e01cc949470f4a6a' }, this.loading && h(PayoutDetailsLoading, { key: '9412e6135da55bddc2964b87065f212bdb1399eb' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'df9b5bf40cc35a5366e9b1ed296b0e289a9f182c', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '64575c2f0be0beaf72094c0dfe9a343fdcd25c88', slot: "head-info", badge: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'c95da0d064416dd0fbdff948c92dcd2b116e1da5', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '765da16cba8659fecc6a4c11b2856f8b1edc3a32', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'ff60105de95f6ef897618a5e7cef2fb39257b9c5', title: "ID", value: this.payout.id }), h("div", { key: '8444116278f29220fe7260d6849ed7db2296d4b4', class: "m-4" }, h(Button, { key: '686e61a3ea27b62024e3544c32542e9ca710c96f', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '5d70b7fcd4ac63002659ffc08c3c18e4b18e3f46', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '8d17ae90696880259707d0500873127c7f134339', sectionTitle: "Details" }), h("div", { key: '80111eb713f6b643a415aaf66accfdb9e279fe03', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'a7c7809a862b315960fd3f7aa5c73c45efb55512', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'b9b03681675854eb3f0d1445f45b1e20a648ded4', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'fa34b24385e0638d7ccd8ceb7382a1f113f0c966', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '6acc6435f7f8b277abd35a8ac90e01556aaab18e', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '560cedeb5230503e74e90bb3e531aed21d317f6c', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '42e2d36cb570acad67366e65316a22dac8f4d4fc', sectionTitle: "Account" }), h("div", { key: 'f2eebf080a48ba0d818363c09269689e201ed5fc', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '6064911935f9e3ef75db3ec7707dd3a182c98c5c', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'eb44916f2659dfc6d81f4e995b3f34527d15e6c2', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '0dbf8e17dfbc1ff1cd70be1d67a6907b91478a98', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '2b377f8749d66f6fd58f5a8437c1e21fbb774706', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '886cc82be28c9cd86200adf78a61846fece1cf40', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'ec5c8ab11778eff8b89be26f85c7172d38b5d4b3', sectionTitle: 'Metadata' }), h("div", { key: '9c72eeee6fb33e536c8425ba1dd6d4a0c8b066ce', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '85ea6096635c9bb6c8fc0b5298dd4cbb6411392c', metadata: this.payout.metadata })))))));
     }
     static get is() { return "payout-details-core"; }
     static get properties() {

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

@@ -0,0 +1,4 @@
+import { h } from "@stencil/core";
+import { Skeleton } from "../../ui-components";
+const PayoutDetailsLoading = () => (h("div", { class: "row gap-3" }, h("div", { class: "col-12" }, h(Skeleton, { width: "35%", height: "30px" })), h("div", { class: "col-12" }, h(Skeleton, { width: "70%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "40%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "40%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "100%" })), h("div", { class: "col-12" }, h(Skeleton, { width: "80%" }))));
+export default PayoutDetailsLoading;

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

@@ -137,7 +137,7 @@ export class PayoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'b32c27e9cd63eebde1bbce6634eeb8be1c804db8' }, h("div", { key: '842d7df46f21510c872e34234d70a3adef80ebd9', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: '3fb2afe1a78cbb39f896d1833a06c4c976e53292', class: "table table-hover", part: table }, h("thead", { key: '65e335052e013f6bd2ddd154b0772d813b03e02f', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '0d113369ff9e4a1933b8c0f699e03ab3812d30d4', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: '64eea2dda7fe52844a39fe4a78840444959c9bf8', class: "table-body" }, h(TableLoadingState, { key: '3f3fb69c8105de8374e57e7279ad0d3e4e88f777', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'df74f8ea143edbfb57efee6952c7ddffc690db8e', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'd12c61e243397de8024c8fe13e518ae3328b5d95', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '23f8f411959eb2464a4f0d75830adedf5cc9d15b', class: "sticky-bottom" }, h("tr", { key: '63a62a4743ef38050ef9d6f2870fc74b5a011568', class: "table-light align-middle" }, h("td", { key: '23a7b62618db1dd52da8c43627f7d512c2f18bc1', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '3c401e3d08d930cc19c5a09e1b34c740f2dd833b', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: 'c546790efb9cc49a78063b3761a9c92038acedd5' }, h("div", { key: '60cc337e0c1c4eb7eb59599cdd0520e4031d1ce9', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: 'e7188291031c23dd5bb7f843b4adebb2c5f2675e', class: "table table-hover", part: table }, h("thead", { key: 'eb3a3b5af4016ae73da8af381e778fe433e683c6', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '9352fcc352a8ea33aa1d49844e092f89a9863ce9', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: 'c924a2a65215845c119f3339b7905a6d7c3cc1fa', class: "table-body" }, h(TableLoadingState, { key: '1d811e44a1319a102a0c56a62c56dda13eb6463e', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '4dacb3d2cf264c1c367a465cb04221be6b2f1e21', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'b294b854e12adcf39c32aaaa34b260775c5195b3', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '668400d517551fa89af74f655befc11a091a0de0', class: "sticky-bottom" }, h("tr", { key: 'b59f6342dccf4c34cbdbddcce7cb4e1c12116fe1', class: "table-light align-middle" }, h("td", { key: '022afdd48ae81ec33f85c90e045d197f0e2f90ec', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'a7e7a1ccdc238af532608626b25123fcd93a6206', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "payouts-list-core"; }
     static get properties() {

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

@@ -13,7 +13,7 @@ export class PayoutsListFilters {
         };
     }
     render() {
-        return (h(StyledHost, { key: 'dbeddac44642b50552902b1d072384d0e308bbcd' }, h("table-filters-menu", { key: '0a4fc98cf7cf7bb5748c9443fe0ad22676b2ec0a', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: '36e7cfd3b59458bfc4f34b25e14d39984d6f9b19', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '3670d1890feecaf9c0ad41278e3862606fa6576a', class: "p-2" }, h("form-control-date", { key: '8f0e4ef2e46b542f17504ef888839726067d3319', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(queryParams.created_after, { showInputDate: true }) })), h("div", { key: '8f661de9cd9115e7ce10e92684cf98d66f9e3e5f', class: "p-2" }, h("form-control-date", { key: '60d03f6687f308c4cb4a39176bec248b204803e2', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(queryParams.created_before, { showInputDate: true }) }))))));
+        return (h(StyledHost, { key: '6cbfeb85a953944c4e3d5a793ba5ef01541d6a38' }, h("table-filters-menu", { key: '08acac404fa3d3cdf0a12d8c1db26bdba741196c', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: 'fed242f0aa7a90027c54ac614938c94417f1f092', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '052f23dbc74cec6ad5d26122a8b51dc4f0e5abad', class: "p-2" }, h("form-control-date", { key: '19bbb0f862ac86820ed8422a1df87475b24a07de', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(queryParams.created_after, { showInputDate: true }) })), h("div", { key: '890b7ddad9586c2f60263e2da55dd30017925715', class: "p-2" }, h("form-control-date", { key: '0d6f1434667344b9845d3a71a22b6dd9425ac6ce', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(queryParams.created_before, { showInputDate: true }) }))))));
     }
     static get is() { return "justifi-payouts-list-filters"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class PayoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '78316ffab976d4674ed157de643d0e579a503050', exportedparts: tableExportedParts }, h("payouts-list-core", { key: '6d258120f1ab81723505f76db75f4d4289e072b4', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, getSubAccounts: this.getSubAccounts, "onError-event": this.handleOnError, columns: this.columns })));
+        return (h(StyledHost, { key: '568c562b7d0bf5cc3ea4f0bc8d0bc0e468480954', exportedparts: tableExportedParts }, h("payouts-list-core", { key: '9aea9e2fa1083617471a127ca34c3d2e6989f445', 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"; }

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

@@ -1,21 +1,48 @@
+import { h } from "@stencil/core";
+import { Badge, BadgeVariant } from "../../ui-components/badge/badge";
 export const MapPayoutStatusToBadge = (status) => {
-    switch (status) {
-        case 'canceled':
-            return "<span class='badge bg-danger' title='Transfer to your bank account failed'>Canceled</span>";
-        case 'failed':
-            return "<span class='badge bg-danger' title='Transfer to your bank account failed'>Failed</span>";
-        case 'forwarded':
-            return "<span class='badge bg-secondary' title='This payout initially failed; the funds have been forwarded to your next successful payout'>Forwarded</span>";
-        case 'in_transit':
-            return "<span class='badge bg-primary' title='Transfer to your bank account has been initiated'>In Transit</span>";
-        case 'paid':
-            return "<span class='badge bg-success' title='Successfully deposited into your bank account'>Paid</span>";
-        case 'pending':
-            return "<span class='badge bg-primary' title='Batched and scheduled to be transferred'>Pending</span>";
-        case 'scheduled':
-            return "<span class='badge bg-primary' title='Batched and scheduled to be transferred'>Scheduled</span>";
-        case 'withdrawn':
-            return "<span class='badge bg-success' title='Negative payout balance successfully withdrawn from your bank account'>Withdrawn</span>";
-    }
-    ;
+    const statusToBadgeProps = {
+        canceled: {
+            variant: BadgeVariant.DANGER,
+            title: 'Transfer to your bank account failed',
+            text: 'Canceled',
+        },
+        failed: {
+            variant: BadgeVariant.DANGER,
+            title: 'Transfer to your bank account failed',
+            text: 'Failed',
+        },
+        forwarded: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'This payout initially failed; the funds have been forwarded to your next successful payout',
+            text: 'Forwarded',
+        },
+        in_transit: {
+            variant: BadgeVariant.PRIMARY,
+            title: 'Transfer to your bank account has been initiated',
+            text: 'In Transit',
+        },
+        paid: {
+            variant: BadgeVariant.SUCCESS,
+            title: 'Successfully deposited into your bank account',
+            text: 'Paid',
+        },
+        pending: {
+            variant: BadgeVariant.PRIMARY,
+            title: 'Batched and scheduled to be transferred',
+            text: 'Pending',
+        },
+        scheduled: {
+            variant: BadgeVariant.PRIMARY,
+            title: 'Batched and scheduled to be transferred',
+            text: 'Scheduled',
+        },
+        withdrawn: {
+            variant: BadgeVariant.SUCCESS,
+            title: 'Negative payout balance successfully withdrawn from your bank account',
+            text: 'Withdrawn',
+        },
+    };
+    const badgeProps = statusToBadgeProps[status];
+    return h(Badge, Object.assign({}, badgeProps));
 };

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { convertToLocal, formatCurrency } from "../../utils/utils";
+import { convertToLocal } from "../../utils/utils";
 import { MapPayoutStatusToBadge } from "./payouts-status";
 import { getAlternateTableCellPart, tableHeadCell } from "../../styles/parts";
 export const defaultColumnsKeys = 'created_at,amount,status,payments_total,refunds_total,fees_total,other_total,csv';
@@ -15,13 +15,13 @@ export const payoutTableColumns = {
     csv: () => (h("th", { part: tableHeadCell, scope: "col", title: "Export CSV" })),
 };
 export const payoutTableCells = (downloadCSV) => ({
-    created_at: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(value, { showDisplayDate: true }), " "))),
-    sub_account_name: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    payments_total: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
-    refunds_total: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
-    fees_total: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
-    other_total: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
-    amount: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
-    status: (value, index) => (h("td", { part: getAlternateTableCellPart(index), innerHTML: MapPayoutStatusToBadge(value) })),
-    csv: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("a", { href: "#", onClick: (event) => { event.preventDefault(); downloadCSV(value); } }, "CSV"))),
+    created_at: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("div", { class: "fw-bold" }, convertToLocal(payout.created_at, { showDisplayDate: true })))),
+    sub_account_name: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.sub_account_name)),
+    payments_total: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.payments_total))),
+    refunds_total: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.refunds_total))),
+    fees_total: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.fees_total))),
+    other_total: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.other_total))),
+    amount: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.amount))),
+    status: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, MapPayoutStatusToBadge(payout.status))),
+    csv: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, h("a", { href: "#", onClick: (event) => { event.preventDefault(); downloadCSV(payout); } }, "CSV"))),
 });

package/dist/collection/components/refund-form/refund-form.js

@@ -75,7 +75,7 @@ export class RefundForm {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '22c804f185486d11df84075a97121bcac4eb98d5' }, h("h1", { key: '90bc4a8b5f1753d3e3009a401e5c9894d83e426e' }, "Refund"), this.refundInfoText && (h("div", { key: '6899f29d44b254dd4a84e348b9d9ec1013cb1785', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: 'f1860c566f76d09f222a62a71f29d48749504968', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: '73c728b24bf46c9382e75753a9566179d12744fa', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: 'e36904b05ae389cb201e72f69845d1a5b034cb4d', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: 'deb53d2bde11025bc7b452097456c7cffbe5c16a', class: "form-group" }, h("form-control-monetary", { key: '0e5211a2ace4ddf86c2f2452e0596586904b594a', name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', maskOptions: CURRENCY_MASK.DECIMAL, inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.amount })), h("div", { key: '68826918f7b2051830bd276fa79030a89a5808d1', class: "form-group" }, h("form-control-text", { key: 'd66b86e6d9d10b6d4853bfebacf758da23362531', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '8ef6f548f2b1a989b04d0a2817ca7a19d1e1dda6', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '1a9406e25864fac07c2a97d3b758aec48bffa2be', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+        return (h(StyledHost, { key: 'a337107e01f347769c24535d875ae75e7cfff526' }, h("h1", { key: '254b014414fffc6e3af12d22c50528915ea4d698' }, "Refund"), this.refundInfoText && (h("div", { key: 'c8eee08dfdd58a87add1a8bbf6b76521db955d32', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '8374d6e0854c35e41429b588ef373c7ed2e2368d', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: '0c4412de09f5538e3f125e9413b75b416c10f820', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '5c51fdc06f7c57851e4db6f797a830602cb31b33', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: '1b1e09d20d0b191491cdbcea601762c6c967d56b', class: "form-group" }, h("form-control-monetary", { key: 'f90e440f11213dfe4ae84675bf8ca22dc67b0e12', name: "amount", label: "Refund Amount", defaultValue: ((_a = this.amount) === null || _a === void 0 ? void 0 : _a.toString()) || '', maskOptions: CURRENCY_MASK.DECIMAL, inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.amount })), h("div", { key: 'd61ef9b10a1ef128afaee01f91c70fb621f50cb0', class: "form-group" }, h("form-control-text", { key: 'bbe2fc33746f333cbc35fa25b2852219e2dbfbef', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '5ca8e922e08881739b403bd9cc4ab21719793961', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '2d971109b53c27779bcf11cd38d3b1b073ecd65d', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
     }
     static get is() { return "justifi-refund-form"; }
     static get encapsulation() { return "shadow"; }

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

@@ -123,7 +123,7 @@ export class TerminalsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'a293f76edb152df4636282a1bdb64526743ba62b' }, h("div", { key: '91c87549f3da243bcbc5e8c3f30690b4f3568312', class: "table-wrapper" }, h("table", { key: 'b8666ef07d7cddecfd576520004cb9ae369816d0', class: "table table-hover", part: table }, h("thead", { key: '82f882e9c8ad8cb8b86fdd8054b2db202f31aee6', class: "table-head sticky-top" }, h("tr", { key: 'db96b27008b1cdfb394f7480d163ba98a564e654', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: 'afe168ca0facd25953f8e23c82ee40b37ff56418', class: "table-body" }, h(TableLoadingState, { key: 'fa4a276edaa35687efd922d987b51248670aad4c', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a7450b6fc3b6e659c46c57c4bb1e06c8102da809', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '89894e4c62d1ec4b4d10f1ca8fd50098e655dcf1', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'ba93ff43a8562b4e77b48a0a026d75d9f84e5249', class: "sticky-bottom" }, h("tr", { key: 'bd75b89450eec1db55c7e92b2e79eab559605bba', class: "table-light align-middle" }, h("td", { key: 'b27b8a0bbe6c2d38393684752809d5e909948567', part: tableCell, colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '959649b1f3c8099c5b929543557823eccd3e9dd9', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: '6d26b39501a43d464cdf017f18a277f761f7091e' }, h("div", { key: '1742f9eec4c84c80563d9e52829cda195f6d0f35', class: "table-wrapper" }, h("table", { key: 'c286d9fe9e0e42631f281820f4d01bf3a0530a37', class: "table table-hover", part: table }, h("thead", { key: '313503778cc7867e9c1276b8ac65d06367efa9b8', class: "table-head sticky-top" }, h("tr", { key: 'fbc26ae3d1ac4600c03c171c3e77624e66fa7915', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: '458b4d6639c232a169a37e1920c5765f461fc5ed', class: "table-body" }, h(TableLoadingState, { key: 'ceeef6c53322679adff07b9bb336d9597dd573c7', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a1ef7bd86fd98c0320539a4c146d41de07901145', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '5f6cbd7d7e2d09ebb38677f1b141ccbdbac70a9f', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'cc1e06c683ad4bb83e80bd960342773cb3c78cd7', class: "sticky-bottom" }, h("tr", { key: 'e83f5fa8207affced7c4cd507aab27ba48e7df52', class: "table-light align-middle" }, h("td", { key: 'f1b6214fc5455ca39cdf2369636b07ad18b54d3d', part: tableCell, colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '5ef057eef49aaa9081b9de5ea8c48e996fa5e35a', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "terminals-list-core"; }
     static get properties() {

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

@@ -21,7 +21,7 @@ export class TerminalsListFilters {
         ];
     }
     render() {
-        return (h(StyledHost, { key: '3a5ad7d48cab44e058b47416531e0b229521fa66' }, h("table-filters-menu", { key: 'f443919483a6de96285eb6ee06fc7a40d70dc8a4', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: '5858a235e31a41c6092df9f35773d03ca660fd4a', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '73cf6b38fb79063fe96cfb697fe537904237a0f2', class: "p-2" }, h("form-control-text", { key: 'e2383519f8b9e50c9c38c47ce5cf65023af8be55', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: queryParams.terminal_id })), h("div", { key: 'a6bdc258402f59aea76c0c2f1d25f22841a15302', class: "p-2" }, h("form-control-select", { key: 'acc06bbb87338b579794b930e9a0205ad7e9e65a', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: queryParams.status || '' }))))));
+        return (h(StyledHost, { key: 'ab88bb5f5cf8f00a875a8c42cacb9649482a8758' }, h("table-filters-menu", { key: 'a214db5a19018dd6df144ef014cf8ea17f6e5efe', params: Object.assign({}, queryParams), clearParams: clearParams }, h("div", { key: '359432076455e6b25bfd30179bd1c66e13cacd52', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '5747e19b82b667d6d3381fd02767d4a27dd82c44', class: "p-2" }, h("form-control-text", { key: 'bc20c285338bf9d1d5c8633bc658c39ccadfeb40', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: queryParams.terminal_id })), h("div", { key: 'fed89678f531c8d3041fdcbc4f77eb81e5387018', class: "p-2" }, h("form-control-select", { key: '5958ccdebe430ce930d1258fa825aeebb6e9065a', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: queryParams.status || '' }))))));
     }
     static get is() { return "justifi-terminals-list-filters"; }
     static get encapsulation() { return "shadow"; }

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

@@ -67,7 +67,7 @@ export class TerminalsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '202c9b2b8492e03f999cb8c62aa71871068e46d6' }, h("terminals-list-core", { key: 'eca0f2a0b076eb92b33bbb3703650506a5e1377b', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '50ee7da4209367703551642456e6df1b38c20cb7' }, h("terminals-list-core", { key: 'e445dbf65c53397757f60d844bd50cafa8d32556', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-terminals-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,11 +1,23 @@
+import { h } from "@stencil/core";
+import { Badge, BadgeVariant } from "../../ui-components/badge/badge";
 export const MapTerminalStatusToBadge = (status) => {
-    switch (status) {
-        case 'connected':
-            return "<span class='badge bg-success' title='This terminal is connected.'>Connected</span>";
-        case 'disconnected':
-            return "<span class='badge bg-danger' title='This terminal is disconnected.'>Disconnected</span>";
-        case 'unknown':
-            return "<span class='badge bg-secondary' title='The status of this terminal is unknown'>Unknown</span>";
-    }
-    ;
+    const statusToBadgeProps = {
+        connected: {
+            variant: BadgeVariant.SUCCESS,
+            title: 'This terminal is connected',
+            text: 'Connected',
+        },
+        disconnected: {
+            variant: BadgeVariant.DANGER,
+            title: 'This terminal is disconnected',
+            text: 'Disconnected',
+        },
+        unknown: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'The status of this terminal is unknown',
+            text: 'Unknown',
+        },
+    };
+    const badgeProps = statusToBadgeProps[status];
+    return h(Badge, Object.assign({}, badgeProps));
 };

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

@@ -9,8 +9,8 @@ export const terminalTableColumns = {
     status: () => (h("th", { part: tableHeadCell, scope: "col", title: "The current status of each terminal" }, "Status")),
 };
 export const terminalTableCells = {
-    nickname: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    provider_id: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    sub_account_name: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    status: (value, index) => (h("td", { part: getAlternateTableCellPart(index), innerHTML: MapTerminalStatusToBadge(value) })),
+    nickname: (terminal, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminal.nickname)),
+    provider_id: (terminal, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminal.provider_id)),
+    sub_account_name: (terminal, index) => (h("td", { part: getAlternateTableCellPart(index) }, terminal.sub_account_name)),
+    status: (terminal, index) => (h("td", { part: getAlternateTableCellPart(index) }, MapTerminalStatusToBadge(terminal.status))),
 };

package/dist/collection/components/tokenize-payment-method/tokenize-payment-method.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { Button, StyledHost } from "../../ui-components";
-import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 import JustifiAnalytics from "../../api/Analytics";
 export class TokenizePaymentMethod {
@@ -8,35 +8,49 @@ export class TokenizePaymentMethod {
         this.authToken = undefined;
         this.accountId = undefined;
         this.paymentMethodGroupId = undefined;
-        this.isLoading = true;
         this.submitButtonText = undefined;
         this.disableCreditCard = undefined;
         this.disableBankAccount = undefined;
+        this.hideSubmitButton = undefined;
+        this.hideCardBillingForm = undefined;
+        this.isLoading = false;
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
-        this.isLoading = false;
     }
     async tokenizePaymentMethod(event) {
         event && event.preventDefault();
-        const tokenizeResponse = await this.paymentMethodOptionsRef.resolvePaymentMethod({ isValid: true });
-        if (tokenizeResponse.error) {
+        this.isLoading = true;
+        try {
+            const tokenizeResponse = await this.paymentMethodOptionsRef.resolvePaymentMethod({ isValid: true });
+            if (tokenizeResponse.error) {
+                this.errorEvent.emit({
+                    errorCode: tokenizeResponse.error.code,
+                    message: tokenizeResponse.error.message,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+            }
+            else if (tokenizeResponse.token) {
+                this.submitEvent.emit({ response: tokenizeResponse });
+            }
+        }
+        catch (error) {
             this.errorEvent.emit({
-                errorCode: tokenizeResponse.error.code,
-                message: tokenizeResponse.error.message,
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                message: error.message,
                 severity: ComponentErrorSeverity.ERROR,
             });
         }
-        else if (tokenizeResponse.token) {
-            this.submitEvent.emit({ response: tokenizeResponse });
+        finally {
+            this.isLoading = false;
         }
     }
     async fillBillingForm(fields) {
         this.paymentMethodOptionsRef.fillBillingForm(fields);
     }
     render() {
-        return (h(StyledHost, { key: '1f0ab23a66f201b93ad60c42a0cd59a9960a5034' }, h("form", { key: 'b4b6e0b75e99505d53bdeae210a15c11e764a1e0' }, h("fieldset", { key: '8094449e89e44f99e4bf3e3517517d5ef5136974' }, h("div", { key: 'aaf859db2a1d7377b3ab37fd9bfa57ed3246ebd9', class: "row gy-3" }, h("div", { key: '3c5b24886edc5d991c5ba760e60741e01818c310', class: "col-12" }, h("justifi-payment-method-options", { key: '39ad866846a9c8ae32f9d34c1cecf812ed6d7c45', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: '1ed6ae634f618a9fafc11961c4db5aea60f368ec', class: "col-12" }, h(Button, { key: 'eed74cc9b5a475b925986b087cd34cc2e912aae6', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button" }, this.submitButtonText || 'Submit')))))));
+        return (h(StyledHost, { key: 'c8c9318c6bbde09a0d56ded9c7333958c5595574' }, h("form", { key: '1c36ac872c58b1a560a658f0b5a0cab9284d3969' }, h("fieldset", { key: 'c43c95a5debbb5a58db162c1f34e0845a2ab76f2' }, h("div", { key: 'c6bc1f6148395e6cfc9185919b0bd81716c1ac99', class: "row gy-3" }, h("div", { key: '887ae3e3bf713ee79b24ae1b4cd12156502d6143', class: "col-12" }, h("justifi-payment-method-options", { key: '06c89583f5d1dee641c90145d129f7192911d00e', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: '04e0ee27d0978a68d44c71c6f7767d685449ed1d', class: "col-12" }, h(Button, { key: '3e43eb8295cc7eba0e2914d94a337f724cd52b57', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText || 'Submit')))))));
     }
     static get is() { return "justifi-tokenize-payment-method"; }
     static get encapsulation() { return "shadow"; }
@@ -93,7 +107,24 @@ export class TokenizePaymentMethod {
                 "attribute": "payment-method-group-id",
                 "reflect": false
             },
-            "isLoading": {
+            "submitButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "submit-button-text",
+                "reflect": false
+            },
+            "disableCreditCard": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -102,33 +133,32 @@ export class TokenizePaymentMethod {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "is-loading",
-                "reflect": false,
-                "defaultValue": "true"
+                "attribute": "disable-credit-card",
+                "reflect": false
             },
-            "submitButtonText": {
-                "type": "string",
+            "disableBankAccount": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "submit-button-text",
+                "attribute": "disable-bank-account",
                 "reflect": false
             },
-            "disableCreditCard": {
+            "hideSubmitButton": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -142,10 +172,10 @@ export class TokenizePaymentMethod {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disable-credit-card",
+                "attribute": "hide-submit-button",
                 "reflect": false
             },
-            "disableBankAccount": {
+            "hideCardBillingForm": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -159,11 +189,16 @@ export class TokenizePaymentMethod {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disable-bank-account",
+                "attribute": "hide-card-billing-form",
                 "reflect": false
             }
         };
     }
+    static get states() {
+        return {
+            "isLoading": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "errorEvent",

package/dist/collection/styles/parts.js

@@ -61,7 +61,15 @@ export const tableError = `table-error ${text} ${backgroundColor}`;
 // Loading spinner
 export const loadingSpinner = `loading-spinner`;
 // Badge
-export const badge = `badge ${text}`;
+export const badge = `badge ${fontFamily}`;
+export const badgePrimary = `${badge} badge-primary`;
+export const badgeSecondary = `${badge} badge-secondary`;
+export const badgeSuccess = `${badge} badge-success`;
+export const badgeDanger = `${badge} badge-danger`;
+export const badgeWarning = `${badge} badge-warning`;
+export const badgeInfo = `${badge} badge-info`;
+export const badgeLight = `${badge} badge-light`;
+export const badgeDark = `${badge} badge-dark`;
 // Dropdown-menu
 export const dropdownMenu = `dropdown-menu ${text}`;
 // Radio List Item
@@ -69,6 +77,7 @@ export const radioListItem = `radio-list-item ${text}`;
 // Skeleton
 export const skeleton = `skeleton`;
 // Component specific
-// This allows the billing form to be hidden, for example
+// This allows specific sections of a component to be hidden, for example
 // ::part(billing-form) { display: none; }
 export const billingForm = `billing-form`;
+export const checkoutSummary = `checkout-summary`;