@justifi/webcomponents 4.21.0 → 4.22.0

package/dist/collection/components/insurance/season-interruption/season-interruption-insurance-core.js

@@ -96,8 +96,8 @@ export class SeasonInterruptionInsuranceCore {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(StyledHost, { key: '81e20ca31e810e7fc12af0f44f993496e07c4396' }, !this.isLoading &&
-            h("div", { key: '7c149f9f9456217cb7c29952d16dee4dbd70ebf7' }, h("h2", { key: 'a65ebd19c87c4e7f5d7d119c8ce8e9c7f7386a30', class: "fs-5 fw-bold pb-3 jfi-header" }, (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title), h("small", { key: 'bc0e129420022c3c301e8563785472fae601376a', innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description }), h("div", { key: '1a4aa9f69e56218fb49861430e62b9261a48f16d' }, h("input", { key: '2e698541d48c5b6a9f50188c0fd8ecc5a7109bca', id: "accept", type: "radio", name: "opt-in", value: "true", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: '797b599fd82cf6ddac712732649d761469421dd0', htmlFor: "accept" }, "Accept coverage for ", formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents))), h("div", { key: 'c3b9aa2b5d008bc3ed2137445fdbd2538f6d96ef', class: "mb-2" }, h("input", { key: '9cdfc5e6db2429685b18ee1adfcad9ac24eec414', id: "decline", type: "radio", name: "opt-in", value: "false", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: 'fd7018ee984526b2d6989f41293712dfb7acdb07', htmlFor: "decline" }, "Decline coverage")), h("div", { key: '80b34b387b3584f1debb418bf8937142fe412636', class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' } }, "Please select an option"), h("small", { key: '4558da3c342a699236c604fb12923d519c53cd89', innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer }))));
+        return (h(StyledHost, { key: 'ca90d98930a8edff34e6690caa04421a70fa9238' }, !this.isLoading &&
+            h("div", { key: 'ff7e145e0fe3e4cc1b1b476369dec63228aeafbf' }, h("h2", { key: '206a364e3efdeafc1c17c6d25ec5de1b8ce21c29', class: "fs-5 fw-bold pb-3 jfi-header" }, (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title), h("small", { key: '0f3ef80b76e2d50b793175dfd9de9910329254ea', innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description }), h("div", { key: '5fa4ea480c0ebc1870f222a4f58529676451e9d4' }, h("input", { key: '40f5f25d82c9a5ecea558ea0f6763d619f82727e', id: "accept", type: "radio", name: "opt-in", value: "true", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: 'c7e2cd5fa6052765e2155cbc24f6fd9d6b8da723', htmlFor: "accept" }, "Accept coverage for ", formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents))), h("div", { key: '47d716b0cb114e3c0a62776491153ca2ce389ce7', class: "mb-2" }, h("input", { key: 'dd442bb652f98a75d184e99d78d79292189ef867', id: "decline", type: "radio", name: "opt-in", value: "false", onChange: (event) => this.onChangeHandler(event), class: this.error ? 'form-check-input me-2 is-invalid' : 'form-check-input me-2' }), h("label", { key: 'e5b7a36f006ed6a78eb762c1bea131800ab45ae4', htmlFor: "decline" }, "Decline coverage")), h("div", { key: 'dddae2c74c62641ccd2ba7352190d6e4731ef19b', class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' } }, "Please select an option"), h("small", { key: '67684b8a101061c54b0629ae35000032232e6847', innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer }))));
     }
     static get is() { return "justifi-season-interruption-insurance-core"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/insurance/season-interruption/season-interruption-insurance.js

@@ -53,7 +53,7 @@ export class SeasonInterruptionInsurance {
         });
     }
     render() {
-        return (h("justifi-season-interruption-insurance-core", { key: '015172f31ca5ad7e00c107ac61282f44f9b7a60f', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
+        return (h("justifi-season-interruption-insurance-core", { key: '205515d248ac43b9de8e7c8f9fec41b93f6e1237', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
     }
     static get is() { return "justifi-season-interruption-insurance"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,8 @@
 import { h } from "@stencil/core";
-import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable } from "../../utils/utils";
-import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
+import { formatCurrency, formatDate, formatTime, snakeCaseToHumanReadable } from "../../utils/utils";
+import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../../ui-components/details/utils";
 import { StyledHost } from "../../ui-components";
+import { MapPaymentStatusToBadge } from "../payments-list/payments-status";
 export class PaymentDetailsCore {
     constructor() {
         this.getPaymentDetails = undefined;
@@ -38,14 +39,14 @@ export class PaymentDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '0c00d8b9511be884b5455156295adc5a16e90d68' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: '84020bce088514c6922aa9f4c60fd36515b255f2', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'f86bc0807e905d95f92019a9f2e5431fa04f663d', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '44d62082ccbb3b99e97a4a43c697c4c9de643983', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '20cbf3475cdc79e8160b7bee05cb1d7492bdbd22', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'bd008154f65e9133aa1d370f84925c5c0b15200b', title: "ID", value: this.payment.id })), h("div", { key: 'eba9206b8b934c5bf61d039640b6729bb7d1e61e', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '5f69927701e6295f339e071ce529e94870122c1c', sectionTitle: "Details" }), h("div", { key: 'd4dba46b241ba5ed150246f1d8dafcd64a9bb019', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '9fc3188f51f5ffb019f9253a62d962536a34d6cf', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '1c4e12cde8f7368f441d92cad4f3bcf1cc9e3d52', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '9dc3a4d6c5911b48122e584cfaafee1d5ec757a8', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'a5fcb34e1af863504c4b54b024f2960e73bd9148', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '2d7960988b5dfd90645c08399ceb658f33fb8e54', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '92ae117d22f20074494a606af6eaca5b2cf51330', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '65dccd244aaca65369e2402c41c34614f95bcdd7', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'b0b2516b604b1b60358b50a02094948200e472a1', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'd26d5d18b727831fa7d7f1cdc3dbcb5187170e9c', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: '415d1b2d0861d3eaaed37914fee27677d36d7f04', sectionTitle: "Payment Method" }),
-            h("div", { key: '56f0388177528afc4ab8acee6b1b884b93c6eaa1', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '04aac1ae9748061527f58144593a1ebd35f4c697', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '7a3e672ba11d55e9cafbda06ba141e7d9d489280', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '03a1001268a22552cdf65e60a08fd45db21f471b', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'df62f6d86a93d7c32eabade0ce0be19439bee824', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: 'f80a25dfa9351a409483901d7e8b4fb298562c04', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: '85c684ff2f417380042e5245e3e6546874a75e72' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: 'a1afa8ca107867f4d48a6069d8df08942e7cb4b2', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'c7e93e52c041808c816768cfd56c2e035410bea3', slot: "head-info", badge: h("span", { slot: 'badge', innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '2dba396e28b3daa61b722ffe32d98c3065ed2e18', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '9c0417863d9b0ba186c7547d41b02372c9ab3d54', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '7a7e31453894d70671b0f001b30aa74c72380308', title: "ID", value: this.payment.id })), h("div", { key: 'd6b72faca6ce471ce914ff5184e6cc2419a2ef84', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'c794e7f7a4ac3fc3442fea20ba6aaf00ca1b52fd', sectionTitle: "Details" }), h("div", { key: '5f34cd707d0f7ca2ed3c0dbd2abc2fc1c5f9ee4c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'f64631d74fb728487477e61d99f93b72ccf03b45', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '7e751f1c2e62ea45fbdb910b4bfb10f2c30e923a', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '1a536d5e027c98aeabd44cbb83f8f38322c37a95', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'a1739f90e3d8cc1724b556168c86e392d1ef84fa', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '0a1f7b910421fe8568c5bbb6a70732f392486370', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '6c45ac2b6e0e84fbdd9e9f6fa26764a351c2495f', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '6571a1faf8daf4079187ccf37603cdec6e7f7602', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '1b343529481cf7143855513e44428cf3188b8326', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'd0ff8578503733c6b580131aed9d3f284e7ab3e8', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: 'c0ec143f86d9c817380efa58cea2a48476df77d8', sectionTitle: "Payment Method" }),
+            h("div", { key: '278b6ef36cf15e9037b4ec94846fc8215b766f61', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'dcbf3d1747b9e84cb10430ee595806381cac21bd', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '0c4f1701aa28272e93d2f13251da5261f90e83cc', title: "Payment Type", value: "Card" }), h(DetailItem, { key: 'f8f90a838143fde661a612c5d880ffc98eb468a2', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '37a455f5451973c3388dd8cf0841320564f9f034', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '156c2b789d28d1ae7b5e4c912c99f29681a2f7ef', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: '87d0832646aa0b72c1bf999f0faf35165f12b61d', sectionTitle: "Payment Method" }),
-            h("div", { key: 'f92a4413b6f156bc4205a51c69d082623ab4fdc0', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '437ca707e081f3f6a8c199044f8b5c3a8d5c64ce', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'fb951661cc27c09858dbaa2819824fb67c026a3e', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '34ef47bb23fc7c490afa84fdad3923ec371f954a', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '0af5278b4449beb21e0c4e6af04f803e5b82dff7', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: '9412b62344613441a40a9cd328e30eef2a024f6c', sectionTitle: 'Metadata' }), h("div", { key: '8553e41975e932bcb132284d3dcae576a21fedb7', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '328e6815791d601ffe68af891ed46e0aff8d28c0', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: '4f5e2cc8141a336e4e9181cee653fda1bf38ecf7', sectionTitle: "Payment Method" }),
+            h("div", { key: '402ae401e93231e6369f9bb76ac48805d7d28f09', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ef33c8d86b6ae69ae94cce998ef9d120b20e66d1', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'db745f865358ab8f8537cc491d6d7ce021e7db29', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '9a15f1c0990145a0ebbbf4ebab04c7b8be3f447b', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: 'dad1476170af5c5cb51a7fbd9329bbe969c51e3e', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: 'fbfc61ca6adb02cca215e1dda51eca1de03023ea', sectionTitle: 'Metadata' }), h("div", { key: '7018390fa3a2304a936999a0c7ceb04d3bd7fed5', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '4ec963eedfb62ab1d038d3f50b4c7199e4954623', metadata: this.payment.metadata })))))));
     }
     static get is() { return "payment-details-core"; }
     static get properties() {

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { PaymentService } from "../../api/services/payment.service";
 import { makeGetPaymentDetails } from "./get-payment-details";
-import { ErrorState } from "../details/utils";
+import { ErrorState } from "../../ui-components/details/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";

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

@@ -108,15 +108,15 @@ export class PaymentForm {
         }
     }
     render() {
-        return (h(StyledHost, { key: '3b0fcfc9adfb9ada04dc4a0bb8c9f826bf3123ff' }, h("form", { key: '6aabed0f73249035573f7219f4968188de54cfc1', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: '3095e15537a5aeb21818e9e357ce9261aa440a58', class: "col-12" }, h("justifi-payment-method-selector", { key: '2103a057989d408a808cd52d47c81a8432346a11', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: '987ba032ed6e9e801a00a94458aa6d8ab8da19fa', class: "col-12" }, h("justifi-payment-method-form", { key: '74159cfbc52d2b1c0c9ab92c13ce137077703f43', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: config.iframeOrigin, ref: el => {
+        return (h(StyledHost, { key: 'a2391aac29babb363f477ec8254491e5790ee34e' }, h("form", { key: 'd41b1f80b10c9be6def16ba694a8a94a14b09d13', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: '26c13e2fa0f1df35c8477b14fbd5a91e65b3d2fa', class: "col-12" }, h("justifi-payment-method-selector", { key: '8c8a4989c3bef7f1b701ab06494e65d1d5f18fff', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: '49917b87314717b1cb0cd9be42ae1f88a05bebad', class: "col-12" }, h("justifi-payment-method-form", { key: '786aa47bacfeea8dc2ae0e878633ad33e771892d', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: config.iframeOrigin, ref: el => {
                 if (el) {
                     this.paymentMethodFormRef = el;
                 }
-            } })), h("div", { key: '41b6830678da64fed9a076d828d03d1caabfe58d', class: "col-12" }, h("justifi-billing-form", { key: '60aaa8e895cdbb45b5f631390b8da7dce271d817', legend: "Billing Info", ref: el => {
+            } })), h("div", { key: '7bd1068b1eb84e58ad0b13702b4d5e6d1bb548a4', class: "col-12" }, h("justifi-billing-form", { key: '63e53f0e0073f84b3d665d6cc7f7381f0d74e653', legend: "Billing Info", ref: el => {
                 if (el) {
                     this.billingFormRef = el;
                 }
-            } })), h("slot", { key: 'd91413a542cf6be2797cd0c4ca67b8dc83431fed', name: 'insurance' }), h("div", { key: 'd4d7a3f318e19af84f7519c351ef590e31bd2ba5', class: "col-12" }, h(Button, { key: 'cbe0d83b648697514759c47d76fd9dcfada21371', variant: "primary", type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, isLoading: this.isLoading, "data-testid": "submit-button", style: { width: '100%' } }, this.submitButtonText || 'Submit')))));
+            } })), h("slot", { key: 'bd274a3501c6ad6225bb928a9e0c3354a075ee5b', name: 'insurance' }), h("div", { key: '5c777cc15acc4e74690e7060130c35398227f60d', class: "col-12" }, h(Button, { key: '6c5b367e177f64d6034eac6fc21468ab34ab9e5e', variant: "primary", type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, isLoading: this.isLoading, "data-testid": "submit-button", style: { width: '100%' } }, this.submitButtonText || 'Submit')))));
     }
     static get is() { return "justifi-payment-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/payment-form/payment-method-selector.js

@@ -13,7 +13,7 @@ export class PaymentMethodSelector {
         this.paymentMethodSelected.emit(event.target.value);
     }
     render() {
-        return (h("div", { key: 'f35b731306676a504c8a13c3a7a19b6c20e2cb26', class: "btn-group jfi-btn-radio-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => (h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType]))))));
+        return (h("div", { key: '66ac630ad3bd8379c28743402fd1df3e4386dac5', class: "btn-group jfi-btn-radio-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => (h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType]))))));
     }
     static get is() { return "justifi-payment-method-selector"; }
     static get originalStyleUrls() {

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

@@ -1,9 +1,9 @@
 import { h } from "@stencil/core";
 import { pagingDefaults } from "../../api";
-import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
-import { tableExportedParts } from "../table/exported-parts";
-import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
+import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
+import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
 import { onFilterChange } from "../../ui-components/filters/utils";
+import { MapPaymentStatusToBadge } from "./payments-status";
 export class PaymentsListCore {
     constructor() {
         this.handleClickPrevious = (beforeCursor) => {
@@ -109,7 +109,7 @@ export class PaymentsListCore {
     }
     render() {
         var _a, _b;
-        return (h(StyledHost, { key: 'c9b7ac6aadf6ff3e3c913ca3c35fb656665e79ec', exportparts: tableExportedParts }, h("payments-list-filters", { key: '36e602e9e8f607834f33a774fd171904592d28bb', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: '8ec5781a7884f9e785bc02dcc1037148a7553d1f', class: "table-wrapper" }, h("table", { key: 'b6f23a3e7f3d33839f72f76eaf388dc4b665fa5d', class: "table table-hover" }, h("thead", { key: 'eddf66479fe049392aa839786785f6e422e34292', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '5753f6b0f1ff3c860019398dd2e37be00720eee0', class: "table-light text-nowrap", part: "table-head-row" }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : "" }, !Array.isArray(column) ? column : column[0]))))), h("tbody", { key: '509aadeae776e891e06b8a558ddbdffd61109bef', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '7cdbec5333849e8430ff437a58282e83674f3a9f', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'e57c861b6c2628a9d7f5f0349ec16ddf25319352', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: 'e904618285b0ed49cd49976f3feb7184aff5649a', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
+        return (h("div", { key: 'e51632f2cff6529131bf09250374f5609b8bbbd2' }, h("payments-list-filters", { key: '335944968281577a826fe2aa2a3866b282c6528c', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: 'ebff773b76f1a4b68a00675fa3499b8de71b1fe2', class: "table-wrapper" }, h("table", { key: '88e00cb3e4a98aa456b8bfb8d2d444d407aadb55', class: "table table-hover" }, h("thead", { key: '8c0bda771073274164ab4299bfdee85d70b0ccd8', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '1d3774f8ecfa33cd68bd299d5d6f5f9364f557c4', class: "table-light text-nowrap", part: "table-head-row" }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : "" }, !Array.isArray(column) ? column : column[0]))))), h("tbody", { key: '9ef8a6b5e19edf824ca91c58ce901a83b12e5d86', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '6f41adae546948d437b09c73611df813160be2d1', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'd359e393f80cdf45d9746a5e4ee979079a11b870', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: 'd2d81ee9b5abcf732972afa56e6e2abc3c7c2e98', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
             this.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? "table-row-even" : "table-row-odd"}` }, data.map((dataEntry) => {
                 let nestedHtml = dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type;
                 if (nestedHtml) {
@@ -118,7 +118,7 @@ export class PaymentsListCore {
                 else {
                     return h("td", { part: "table-cell" }, dataEntry);
                 }
-            }))))), this.paging && (h("tfoot", { key: '5be3c247a0f19ccb4463ece1d7e2f973cd00162a', class: "sticky-bottom" }, h("tr", { key: '41714e1fca135c22a849983e71c1a93d7a6330e9', class: "table-light align-middle" }, h("td", { key: '8af7acb966f43f353c7590ab02525c9f3e01b379', part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { key: 'e6ec8d634dfd8dca68e8a9e1fc41782046f2115a', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+            }))))), this.paging && (h("tfoot", { key: '556eb5c90bf12c3d1b577fc74911e3318a95b87c', class: "sticky-bottom" }, h("tr", { key: 'e69f4f7a9510131a737460568a2e398908315848', class: "table-light align-middle" }, h("td", { key: '518a89afe7e7aaf02857ef9e7f0bad0fc0220eeb', part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { key: '4510a747b96502d86615c90f8ba0d051b3f1cec8', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
     }
     static get is() { return "payments-list-core"; }
     static get properties() {

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

@@ -22,7 +22,7 @@ export class PaymentsListFilters {
         ];
     }
     render() {
-        return (h("table-filters-menu", { key: '96bffa87c69967fd1a5af7d171eb3836d82f994b', params: this.params, clearParams: this.clearParams }, h("div", { key: 'cf77c3d54377829e813b1ab53f4cbcbd38fe721b', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '8d0ce058ca9419e35202838d689c67266adc58e8', class: "p-2" }, h("form-control-text", { key: '7485f3e7366531240819370a62341b1e1cd1a647', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.payment_id })), h("div", { key: '95a92490bb414ab5ee4ec5c9dc1ae49bf10f4adc', class: "p-2" }, h("form-control-text", { key: '6fec7cbb05410cafacb374221582301d819aac10', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.terminal_id })), h("div", { key: '2d3bebafb9dc28c0e8a23a954af6019497d0b404', class: "p-2" }, h("form-control-select", { key: '48705b2cf089301674bf8147445ca00ebb9f1240', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.payment_status })), h("div", { key: 'bfc71e6a99f805d00a777b3374a20ede9abd90ea', class: "p-2" }, h("form-control-date", { key: '69183a8905039fd6e021ac9da1dcbb2897009101', name: "created_after", label: "Start Date", inputHandler: this.setParamsOnChange, defaultValue: this.params.created_after, showTime: true, filterTimeZone: true })), h("div", { key: '9eabcbc9ec8156f3ad490c91e0d9fae9a51dc3cd', class: "p-2" }, h("form-control-date", { key: '838d06eebe74acdff6e6025da2d46a6fcca98d72', name: "created_before", label: "End Date", inputHandler: this.setParamsOnChange, defaultValue: this.params.created_before, showTime: true, filterTimeZone: true })))));
+        return (h("table-filters-menu", { key: 'a155feec339f48d77b25f4036bb185125bc0a7ce', params: this.params, clearParams: this.clearParams }, h("div", { key: '57c1528bdd86374dd2c780ae0d6b4850e7a96bcd', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'fc61d1e3c37cb3d5914b517e72ec569094c0cc8f', class: "p-2" }, h("form-control-text", { key: '7a81ebac31e074b3bd499c275d5ef68fd02d4910', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.payment_id })), h("div", { key: '3926d05f92b0a16581f1dd66dcc1aee300d2bc98', class: "p-2" }, h("form-control-text", { key: '48b999c9543ca31146fb010d02074be69544fabc', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.terminal_id })), h("div", { key: '64d87e35e59931fc76ab9f4e1a6c486f839b9fbb', class: "p-2" }, h("form-control-select", { key: 'a3fe39cd40dccb2143139a127e1d37ef669acf63', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.payment_status || '' })), h("div", { key: 'a522b9e4d8e9c4e3e3bf577deb4db56ffc13fc13', class: "p-2" }, h("form-control-date", { key: 'd2d277dc5f3bf4b80b4f09b60ed7f76bedaa46ab', name: "created_after", label: "Start Date", inputHandler: this.setParamsOnChange, defaultValue: this.params.created_after, showTime: true, filterTimeZone: true })), h("div", { key: 'b6e15a8cfca24097432edd77fa339c09b72ce74c', class: "p-2" }, h("form-control-date", { key: '5c27469e525dba1111eaec6a8446bdacf34baee4', name: "created_before", label: "End Date", inputHandler: this.setParamsOnChange, defaultValue: this.params.created_before, showTime: true, filterTimeZone: true })))));
     }
     static get is() { return "payments-list-filters"; }
     static get properties() {

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

@@ -1,11 +1,12 @@
 import { h } from "@stencil/core";
 import { PaymentService } from "../../api/services/payment.service";
 import { makeGetPayments } from "./get-payments";
-import { ErrorState } from "../details/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
 import { config } from "../../../config";
+import { StyledHost } from "../../ui-components/styled-host/styled-host";
+import { tableExportedParts } from "../../ui-components/table/exported-parts";
 /**
   * @exportedPart label: Label for inputs
   * @exportedPart input: The input fields
@@ -70,10 +71,7 @@ export class PaymentsList {
         }
     }
     render() {
-        if (this.errorMessage) {
-            return ErrorState(this.errorMessage);
-        }
-        return (h("payments-list-core", { getPayments: this.getPayments, "onError-event": this.handleErrorEvent }));
+        return (h(StyledHost, { key: 'a1c35cabf7026d694df44351b0879839a21376b8', exportparts: tableExportedParts }, h("payments-list-core", { key: 'c07919c4982f04122d5e4b2a6bdb4e506f7384e5', getPayments: this.getPayments, "onError-event": this.handleErrorEvent })));
     }
     static get is() { return "justifi-payments-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,23 @@
+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 haven't 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 didn't go through (it won't 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>";
+    }
+    ;
+};

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

@@ -1,7 +1,8 @@
 import { h } from "@stencil/core";
-import { MapPayoutStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
-import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
+import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
+import { CodeBlock, DetailItem, DetailSectionTitle, EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../../ui-components/details/utils";
 import { StyledHost } from "../../ui-components";
+import { MapPayoutStatusToBadge } from "../payouts-list/payouts-status";
 export class PayoutDetailsCore {
     constructor() {
         this.downloadCSV = () => {
@@ -52,7 +53,7 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'b538a72063f57deea45d1ce74c173156a499e08f' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '5ea45dac87ab9959a0d821c2d2cae5ee9cf0894b', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '372a13f727ec9d0d375b37ae029a5ab2df3d72d3', slot: "head-info", badge: h("span", { slot: '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: '9afd1e327235bb0d3a48697ea01b68a5516789c2', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'f00add046d617c12540be0cfc4540808719e0e65', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '239849324e65aa9eea6070c4fca8d2a85c490bb1', title: "ID", value: this.payout.id }), h("div", { key: '0f2ea65e410f9e89499e60b14b91005d3e98838d', class: "m-4" }, h("button", { key: '09b9efcd24c0aa3364be75f2ec07055a381f100a', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'a8ff31263826356fb0c0ea7dbc3433e04e45d413', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '47923246812e7ef3828fc33914c3f01cb6a38b31', sectionTitle: "Details" }), h("div", { key: '37bf9c3a58e2a2678bb96b6aaca739e032ea61b9', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '772024dd509058d54e6da5d3a6450a163774fd36', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '2925020997b1da4e263ae44ef55605765407c386', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'e34388b87e09d4c94ca4463f3a5ede078f41d938', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '931e4fc84ad6932b40824cdbb8bf8909bacee2c7', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '38c1be3b0872d990dfafcdd796ed2a9be6a8bfa1', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '0057ad126e391f2f55307a3c6035c8feb1ca959b', sectionTitle: "Account" }), h("div", { key: '2d19e06db0a626313481f91a4602239634c846c7', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '147e30b77458b02cc0d996ba91e253dfa11e58a0', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '32f4ffcd4c44e3adc97e94da99aaafa0412fe258', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '293bbea794dd126fbaada4b263f2b85ed0d9fbb4', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '0dbb60bb773745657961d1a20a3621ba319436c0', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '5dbf5b3225b33cf7d6f838e0621eac4ace8351c9', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'e89cdd81cb5ef15d964c0a00a0bbb2f57fadc5d2', sectionTitle: 'Metadata' }), h("div", { key: '6c3da5b9aeaef544d28504708af32219164c37ca', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '0ad346c1bfb3639852b64fc3ab4906efad584f54', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: '77668046c9b20d8e5fa2b1cf278925a8646052d7' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '975c61e183b809b42e96b1785a9c8c60ac397231', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '0258d3adf8c1f65c0f78446a3c5fa6c5a39fdde4', slot: "head-info", badge: h("span", { slot: '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: 'd845cd2abc1d82cc62ea7116a405570b235bcde0', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '8ae3e1f22c0fb5fd76e1fdbecb91bc70be0ffe21', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '8d0405aa11c546ddc92b4e2e65c651a4aae2c82f', title: "ID", value: this.payout.id }), h("div", { key: 'a2b2b06a33009bb27c60aa0d2af74f0ec18db3d1', class: "m-4" }, h("button", { key: 'ae32f0567a4d4d533a322c20668b2a165fe71f4c', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '1519308f535b2f7dbc065f3320b60755c732f5e4', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'b4da3442d6e86f9a4d6b2a8ffd6ed40053294151', sectionTitle: "Details" }), h("div", { key: '1a83acdafddfda491141cc68b70fbf2c9d4df69c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ac81d5cb6b185a4e40c5a27bd75113657a86d087', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '9b327577694e255d466a6009de0d39d67a144063', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '8ac6c81f11caa365e6b530bedeb26a7682199538', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '1cd8424c8299f8f334bd08e85cbe81018dfd69c3', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '44f6cbf82e5f79d8fa532923233d6a5eedeef19c', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'fc4366a767fd89ab25939d1d3cef9e2372c6b7ba', sectionTitle: "Account" }), h("div", { key: '7ea8ccb28ef7cb32490e82cf8470c88de6275fcb', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '9e50c25012fe1873ef4bf8dd65d9aa1f0b2f6252', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'be19c35d8766716abe7a94a43ff1360fb2bc8caf', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'f3ceaa15d8e8c8de8a4b57d431049b5f1f12b7aa', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '25468ae8b033172207f130448926eda8333df841', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'c5b60f0bfa2cfdc826cc54670ab66af199c8babc', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '78392b7f27b6ceb3499c512f2174e3d4b4058f63', sectionTitle: 'Metadata' }), h("div", { key: '43c5439322874b89612f37ec41e906fda030dd3b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '2929f26c8b7932862cbb735bc8644eabd9494e14', metadata: this.payout.metadata })))))));
     }
     static get is() { return "payout-details-core"; }
     static get properties() {

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { PayoutService } from "../../api/services/payout.service";
 import { makeGetPayoutDetails } from "./get-payout-details";
-import { ErrorState } from "../details/utils";
+import { ErrorState } from "../../ui-components/details/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { makeGetPayoutCSV } from "./get-payout-csv";

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

@@ -1,10 +1,10 @@
 import { h } from "@stencil/core";
-import { PayoutStatuses, PayoutStatusesSafeNames, pagingDefaults, } from "../../api";
+import { pagingDefaults } from "../../api";
 import { formatCurrency, formatDate, formatTime } from "../../utils/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import { DownloadIcon } from "../../assets/download-icon";
-import { tableExportedParts } from "../table/exported-parts";
-import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
+import { TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
+import { MapPayoutStatusToBadge } from "./payouts-status";
 export class PayoutsListCore {
     constructor() {
         this.downloadCSV = (payoutId) => {
@@ -32,22 +32,6 @@ export class PayoutsListCore {
             delete newParams.before_cursor;
             this.params = Object.assign(Object.assign({}, newParams), { after_cursor: afterCursor });
         };
-        this.mapStatusToBadge = (status) => {
-            switch (status) {
-                case PayoutStatuses.scheduled:
-                    return `<span class="badge bg-primary" title='Batched and scheduled to be transferred'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.in_transit:
-                    return `<span class="badge bg-primary" title='Transfer to your bank account has been initiated'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.failed:
-                    return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.canceled:
-                    return `<span class="badge bg-danger" title='Transfer to your bank account failed'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.forwarded:
-                    return `<span class="badge bg-secondary" title='The funds have been forwarded to your next successful payout'>${PayoutStatusesSafeNames[status]}</span>`;
-                case PayoutStatuses.paid:
-                    return `<span class="badge bg-success" title='Successfully deposited into your bank account'>${PayoutStatusesSafeNames[status]}</span>`;
-            }
-        };
         this.rowClickHandler = (e) => {
             const clickedPayoutID = e.target.closest('tr').dataset.rowEntityId;
             if (!clickedPayoutID)
@@ -125,7 +109,7 @@ export class PayoutsListCore {
             formatCurrency(payout.fees_total),
             formatCurrency(payout.other_total),
             formatCurrency(payout.amount),
-            { type: 'inner', value: this.mapStatusToBadge(payout.status) },
+            { type: 'inner', value: MapPayoutStatusToBadge(payout.status) },
             (h(DownloadIcon, { title: "Export CSV", onClick: () => this.downloadCSV(payout.id), style: { height: '24px', width: '24px', cursor: 'pointer' } })),
         ]);
     }
@@ -139,8 +123,8 @@ export class PayoutsListCore {
         return !this.showEmptyState && !this.showErrorState;
     }
     render() {
-        return (h(StyledHost, { key: '832eff9b77800d6631c73559b61af3b8c5c1eb5b', exportedparts: tableExportedParts }, h("div", { key: 'b2a127643e0a48888c643f77d9235082502a2549', class: "row gy-3 mb-4" }, h("div", { key: '6b2ef796b48da76e816ed5090126bf6c891687ce', class: "col-2" }, h("form-control-date", { key: '52c7507bd47a665d8986cdde06a1e26f30a5f9e0', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: 'acb3307eec6b6d36b229d59683782bfbb2e65239', class: "col-2" }, h("form-control-date", { key: '294f40153e9eb61b53152763ff54e942620962a0', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("div", { key: '0d55a8fe0017a7fc3a3a675b11aeff9f0eb71cef', class: "table-wrapper" }, h("table", { key: 'c7fe79007a7ddb600117df904e376465abec406e', class: "table table-hover" }, h("thead", { key: '451a5f744c76a6b6beb2ad0cafd3677fd0f0b190', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: 'c7b58d5e0a96536df39673f8ac928c0809fe7f64', class: "table-light text-nowrap", part: "table-head-row" }, this.columnData.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, Array.isArray(column) ? column[0] : column))))), h("tbody", { key: '638cac393da61b6c73a7b287f5c9b13d0817390e', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'dd768838da9b29c4f1e251eb27ba2c5b467a4a7d', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '412fe6a904e37f095c5c7a0aeb2356b893cfef7b', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: '144bf2bf71789a1a29b638291ec5ca16ab31b2fc', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
-            this.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? 'table-row-even' : 'table-row-odd'}` }, data.map((dataEntry) => ((dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type) ? (h("td", { part: "table-cell", innerHTML: dataEntry.value })) : (h("td", { part: "table-cell" }, dataEntry)))))))), this.paging && (h("tfoot", { key: '0df80be6f5c3e2cd18fa27c0ec2e1cb560348908', class: "sticky-bottom" }, h("tr", { key: '0d25309ea10e119e07e6d5438b70dd5a83b22f2b', class: "table-light align-middle" }, h("td", { key: '25a111ea022692ea8502ddfdf92dd9811fde6024', part: "pagination-bar", colSpan: this.columnData.length }, h("pagination-menu", { key: '5cc20eba110ab7c974dc43c8d20e94f6cb17ec81', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        return (h("div", { key: '536d8a921bb7b6517dc65afd307507668e74e92f' }, h("div", { key: '5d33c651af05927db51e7d855772ff1c60f71ef0', class: "row gy-3 mb-4" }, h("div", { key: '53f246db4d96ef4ac445c0b57d4da3471c9fdbdb', class: "col-2" }, h("form-control-date", { key: 'd6e711e3e92e53cff8e2ee4a8c4a3788584c0f77', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: '86ab746d1e7f9e11dfeca4cd185909d9d447fe85', class: "col-2" }, h("form-control-date", { key: '232edbf8284d14ed3659a199b144eb5596e22b88', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("div", { key: '10c720e38bd24ff9431d59a28ec46f62bd8c04a7', class: "table-wrapper" }, h("table", { key: 'fdbf0978c018315d5e67caf9273e59bf4e50205c', class: "table table-hover" }, h("thead", { key: 'f3fc1532a46f8b92eff8d385462fe8ba9448840b', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: 'fe552206bf026258b40031c10a030fb32f98879d', class: "table-light text-nowrap", part: "table-head-row" }, this.columnData.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, Array.isArray(column) ? column[0] : column))))), h("tbody", { key: '1247efd4d95cfb257d052acf9dbcac84203aaaaf', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '1107d1a965651133504db486d4d0b692fe9735e9', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '8435806053ae9d16a05cc031f33d3b97e4d02248', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: '01213ac9d7f63e0eaa11c38f4aebe59aef3650d9', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
+            this.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? 'table-row-even' : 'table-row-odd'}` }, data.map((dataEntry) => ((dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type) ? (h("td", { part: "table-cell", innerHTML: dataEntry.value })) : (h("td", { part: "table-cell" }, dataEntry)))))))), this.paging && (h("tfoot", { key: 'd2a1b0dd2340cf64816ad05c1c03f136b21df0a6', class: "sticky-bottom" }, h("tr", { key: 'abb87b7c026475da175a6bec772887bf3ac08933', class: "table-light align-middle" }, h("td", { key: '32070f512aebc77a42693a93e717d31ef9ed4509', part: "pagination-bar", colSpan: this.columnData.length }, h("pagination-menu", { key: '57ee656553f4afee96f5dbdac5866f103cde97eb', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
     }
     static get is() { return "payouts-list-core"; }
     static get properties() {

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

@@ -1,12 +1,12 @@
-import { Host, h } from "@stencil/core";
-import { tableExportedParts } from "../table/exported-parts";
+import { h } from "@stencil/core";
+import { tableExportedParts } from "../../ui-components/table/exported-parts";
 import { PayoutService } from "../../api/services/payout.service";
 import { makeGetPayouts } from "./get-payouts";
-import { ErrorState } from "../details/utils";
 import { ComponentErrorCodes } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { makeGetPayoutCSV } from "../payout-details/get-payout-csv";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
+import { StyledHost } from "../../ui-components/styled-host/styled-host";
 /**
   * @exportedPart label: Label for inputs
   * @exportedPart input: The input fields
@@ -71,10 +71,7 @@ export class PayoutsList {
         }
     }
     render() {
-        if (this.errorMessage) {
-            return ErrorState(this.errorMessage);
-        }
-        return (h(Host, { exportedparts: tableExportedParts }, h("payouts-list-core", { getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, "onError-event": this.handleOnError })));
+        return (h(StyledHost, { key: '8d72aa16705df76ed49a13a59e88a40a75c23488', exportedparts: tableExportedParts }, h("payouts-list-core", { key: '94428c879981bbc036e1d4f6c59c1e1c1146c824', getPayouts: this.getPayouts, getPayoutCSV: this.getPayoutCSV, "onError-event": this.handleOnError })));
     }
     static get is() { return "justifi-payouts-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,21 @@
+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>";
+    }
+    ;
+};

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

@@ -1,7 +1,7 @@
 import { h, } from "@stencil/core";
 import RefundFormSchema from "./refund-form-schema";
 import { Api } from "../../api";
-import { FormController } from "../form/form";
+import { FormController } from "../../ui-components/form/form";
 import { config } from "../../../config";
 import { CURRENCY_MASK } from "../../utils/form-input-masks";
 import { StyledHost } from "../../ui-components";
@@ -75,7 +75,7 @@ export class RefundForm {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '516b98561c2ef689f55e5e8d9f51d4402a4ea10e' }, h("h1", { key: '9abb0e3a97718c07b3a5f14386568fd0e923948a' }, "Refund"), this.refundInfoText && (h("div", { key: '7192d63f4bd998dfd9df34c9546c0574b5f0e8ab', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '305285344f17b371b9b1ea5f99b415848130449a', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: '1e52a501d4c3aec869e7298cce5c738abc4c2bbe', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '80b32c70ebec874e42657fe46f8e56c258784e75', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: '7f94e31cf8b06568e8b06323ea0d6c3604479ef8', class: "form-group" }, h("form-control-monetary", { key: '9f72b96326de41ac1e1af2879556ced5bd07ec17', 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: '10723487f0b8d28c64730d071690137f1a02488c', class: "form-group" }, h("form-control-text", { key: 'cb974dcab2da25415d1dbb6525a3c2e91660582d', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '9abd0558ab409a97ea529de04307edfb1c7a6054', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '5e64b5ec2c5d4c8bb19038f70cbab6093275d8eb', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+        return (h(StyledHost, { key: '05a417edd28ecdb609c9ca6abaa60004fe782beb' }, h("h1", { key: '05450dad6321a3cb94461d020a64dde7abfcb287' }, "Refund"), this.refundInfoText && (h("div", { key: '4874c1bbbbcb0caac057e7d29eb5d62f998e7f70', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: 'cb64bc85188e882e6c863bb2e56411f31f9675d3', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: 'd1497287435d3b87f77bf37d4bd1473cf1ddc4f3', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '4936209e143d8c5d6ef6a32ddc49d63b92711351', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: 'fc6e616809550f22b949d1f256b4ddc922e1fab9', class: "form-group" }, h("form-control-monetary", { key: '220c36b30960e85b30999267b7daa933062e4ca0', 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: 'd40556a67819325134ff1389a8e8018b024ce0da', class: "form-group" }, h("form-control-text", { key: '1c1cb5a345118902830bad6ec852bfb0641a983c', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: 'bb167956ce0a4bef63fbdee79681348a963f55be', class: "form-group d-flex flex-row-reverse" }, h("button", { key: 'd6767bf536e4416f4071271cc2028be69686a59e', 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/get-terminal-detail.js

@@ -0,0 +1,29 @@
+import { Terminal } from "../../api";
+import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { getErrorCode, getErrorMessage } from "../../api/services/utils";
+export const makeGetTerminalDetails = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.fetchTerminal(id, authToken);
+        if (!response.error) {
+            onSuccess({ terminal: new Terminal(response.data) });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        onError({
+            error: getErrorMessage(error),
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+};

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

@@ -0,0 +1,31 @@
+import { Terminal } from "../../api";
+import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { getErrorCode, getErrorMessage } from "../../api/services/utils";
+export const makeGetTerminals = ({ id, authToken, service, apiOrigin }) => async ({ params, onSuccess, onError }) => {
+    var _a, _b;
+    try {
+        const response = await service.fetchTerminals(id, authToken, params, apiOrigin);
+        if (!response.error) {
+            const pagingInfo = Object.assign({}, response.page_info);
+            const terminals = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.map((dataItem) => new Terminal(dataItem))) || [];
+            onSuccess({ terminals, pagingInfo });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_b = response.error) === null || _b === void 0 ? void 0 : _b.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+};