@justifi/webcomponents 4.20.1 → 4.21.0

package/dist/collection/components/form/form-control-number.js

@@ -28,7 +28,7 @@ export class NumberInput {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: 'dd43d75b327c05e75b453b954346c6ffcd85a2f5', exportparts: 'label,input,input-invalid' }, h("div", { key: '5215f62251bd89be493ddffe46bf0c466b42e314', class: 'form-group d-flex flex-column' }, h("label", { key: 'f0409970f8d43bcdef92b81363cc24aa1bb691a0', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '9c6a5899e64ba1a8af6af80c63b6a0895351da63', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h("form-control-help-text", { key: 'cd7b4a724427383cafc04137f6feca473695b020', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '04748d3c5b1067b0312a2b7c36369e2a21a7215f', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '5f7a94160460fd8a92d740899a7418c98b3178d0', exportparts: 'label,input,input-invalid' }, h("div", { key: 'c8386c9c72a721d53d33d3894615f7d8f127b1bf', class: 'form-group d-flex flex-column' }, h("label", { key: '754f8714d1d0e42c977dace41e79d0e7b21c7e39', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '4289872c0983d50ff89851aac2309b911e6348df', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText && 'input-invalid'}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h("form-control-help-text", { key: '0de80b8d728865b8978a7daaf54315dbf422dced', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'b0cd9a78aa4c44dc7103c5d6ceced7258b197f16', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number"; }
     static get properties() {

package/dist/collection/components/form/form-control-select.js

@@ -27,7 +27,7 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'e62a08c8ba656cc7e82c0f8f7facccc086fbafe7', exportparts: "label,input,input-invalid" }, h("div", { key: 'f9a4c428311f32f2585ca9259ba31909187b809d', class: "form-group d-flex flex-column" }, h("label", { key: '006a3bd7ae2874bf3fa24e2c053808e51b652d9a', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("select", { key: 'f0ac14e8b74c939b4928b9ce800118f660c90613', ref: el => (this.selectElement = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText ? 'input-invalid' : ''}`, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h("form-control-help-text", { key: '3a60ff2a2af7668013baf2767d97095379b2d37e', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '8c4049d16408f305b8bf1e8a49c91db56991a840', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'f76dcf05e5929448b9a89b1d4b6f18a6f7cae3e5', exportparts: "label,input,input-invalid" }, h("div", { key: '675bc78c7197ce8ded2cbdfb31b77fde5e12d9e5', class: "form-group d-flex flex-column" }, h("div", { key: 'a3f538fb4b3aba7e87071e1838c4d668cb217851', class: "d-flex align-items-start gap-2" }, h("label", { key: '389d9573b53b4ea51492455dc88222714df33387', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e0853d21ebd9e264e87b4707708bfbef3f50a4bb', helpText: this.helpText })), h("select", { key: '50d9af6ee9266eeb514a7b1512fb73b480f5e163', ref: el => (this.selectElement = el), id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, part: `input ${this.errorText ? 'input-invalid' : ''}`, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h("form-control-error-text", { key: 'e199881b4ffd032059ea548202ce9fee94b9187a', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-select"; }
     static get properties() {

package/dist/collection/components/form/form-control-text.js

@@ -30,7 +30,7 @@ export class TextInput {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: 'fddfb4134747c8d8caf6594f5450e57fa4c2dc3e', exportparts: "label,input,input-invalid" }, h("div", { key: 'bbd0174fb56d911992907e0a2c453b9d1412b636', class: "form-group d-flex flex-column" }, h("label", { key: 'f5d9d3d6c4694d08d86963df37adbd1b334593b3', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'ae49e4c86782fd0901c1a0e8530981cf1b0b7c65', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: `input ${this.errorText ? 'input-invalid ' : ''}${this.disabled ? ' input-disabled' : ''}`, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h("form-control-help-text", { key: '1e1bbc8d39e5caeca559515f72eb17ca9b3ab0b1', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '44c121cb0eb69840440e696e784c7a73689a42f2', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: '242da84a35d52f4d44bcaaa1ec016487ffb5936e', exportparts: "label,input,input-invalid" }, h("div", { key: 'a581089ec206ac71f586c837f53aec54e394776a', class: "form-group d-flex flex-column" }, h("div", { key: '88e11b4a8d79e72f63f80415b5dad74d8a47fa5b', class: "d-flex align-items-start gap-2" }, h("label", { key: 'd37f5e37ab6e46c43196638301e46410d70f753c', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '2702eabd98b632487a418facb33855bdb19b5167', helpText: this.helpText })), h("input", { key: 'e70affeeed2f0d0975a827e9d691a05c7732854f', id: this.name, name: this.name, onBlur: this.formControlBlur.emit, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? " input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h("form-control-error-text", { key: 'f1ba545bec21198a4e78e4989bf5703f17052642', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {

package/dist/collection/components/form/form-helpers/form-control-tooltip/form-control-tooltip.js

@@ -0,0 +1,63 @@
+import { h } from "@stencil/core";
+export class TooltipComponent {
+    constructor() {
+        this.anchorIcon = undefined;
+        this.tooltip = undefined;
+        this.helpText = undefined;
+    }
+    show() {
+        this.tooltip.classList.add('show');
+    }
+    hide() {
+        this.tooltip.classList.remove('show');
+    }
+    render() {
+        if (!this.helpText) {
+            return null;
+        }
+        return (h("div", { class: "tooltip-container" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", class: "bi bi-question-square tooltip-icon", viewBox: "0 0 16 16", ref: (el) => (this.anchorIcon = el), part: "tooltip-icon" }, h("path", { d: "M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" }), h("path", { d: "M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94" })), h("custom-popper", { trigger: "hover", placement: "top", anchorRef: this.anchorIcon }, h("div", { class: "tooltip bs-tooltip-top", part: "tooltip", role: "tooltip", ref: (el) => (this.tooltip = el) }, h("div", { class: "tooltip-inner", part: "tooltip-inner" }, this.helpText)))));
+    }
+    static get is() { return "form-control-tooltip"; }
+    static get properties() {
+        return {
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "help-text",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "anchorIcon": {},
+            "tooltip": {}
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "showEvent",
+                "method": "show",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "hideEvent",
+                "method": "hide",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/gross-payment-chart/gross-payment-chart-core.js

@@ -68,7 +68,7 @@ export class GrossPaymentChartCore {
         }
     }
     render() {
-        return (h(Host, { key: '463d7e132e647e1da6dc5ad5ea54abf95a60e715' }, this.loading && LoadingState(), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
+        return (h(Host, { key: 'aee0faee30a5c998410cdb28d52107ce2c0cb672' }, this.loading && LoadingState(), !this.errorMessage ? h("canvas", { id: "chart", ref: (elem) => this.chartRef = elem }) : ErrorState(this.errorMessage)));
     }
     static get is() { return "gross-payment-chart-core"; }
     static get originalStyleUrls() {

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: '7b1384ddbc83b5f92d3a2c4f8e544c8bd06fa716' }, !this.isLoading &&
-            h("div", { key: 'd94a61158ceb79c30d81ee5186195d3454c01323' }, h("h2", { key: '05d5b1499cf7de28823ec98ebd2c220eca7471f1', class: "fs-5 fw-bold pb-3 jfi-header" }, (_a = this.quote) === null || _a === void 0 ? void 0 : _a.product.title), h("small", { key: 'fa26cf97a06a9910d7f4cb04d149bbcd9f30d103', innerHTML: (_b = this.quote) === null || _b === void 0 ? void 0 : _b.product.description }), h("div", { key: '287de8ed4ca603b3162b4158d18d7e8a53e3b453' }, h("input", { key: '59adbc8ac892e572bc1aa68f3c626beab76af282', 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: '469ac2622be0c76564de8102a499d3d3790380b2', htmlFor: "accept" }, "Accept coverage for ", formatCurrency((_c = this.quote) === null || _c === void 0 ? void 0 : _c.total_cents))), h("div", { key: '7a8827c4261d5978ecca31fc42397f233b3e37fc', class: "mb-2" }, h("input", { key: 'e25994c491ca5d74d20ec5f5787ff88ee9575ca0', 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: '0a5f13213a19e13258c72ccbbe7a2e148daf1750', htmlFor: "decline" }, "Decline coverage")), h("div", { key: '33a190aa52dfefd6accf77a9e00598563a8f5e6c', class: "invalid-feedback", style: { display: this.error ? 'block' : 'none' } }, "Please select an option"), h("small", { key: 'f10e4ebd9a896fc792bb3d18d6014100013cb0b7', innerHTML: (_d = this.quote) === null || _d === void 0 ? void 0 : _d.product.legal_disclaimer }))));
+        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 }))));
     }
     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: '0ef99882f70c9886e8a5b49da5fe89dd4421067a', 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: '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 }));
     }
     static get is() { return "justifi-season-interruption-insurance"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,14 +38,14 @@ export class PaymentDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'aaaea4076938af5a74197256dba1093265f0e2d6' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: '12f06fa05915380403e244cbed053d0c04bfa1d4', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '4d496def6abfc728e6f184fb0729ac648fb2deaf', 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: '78dcff13206646d594bdc80f6297d45dc9932694', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'dfa0de667ebd28efd217b6bdf548b9b1b728b57e', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'b449b180034f28504007a9c2fb0598607dc00efb', title: "ID", value: this.payment.id })), h("div", { key: '62af84e244e38b24b32f791d13f1b21b49942597', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '0ddb0366b4ab737c7b08a37764b8ce2f7ec4a1e9', sectionTitle: "Details" }), h("div", { key: 'cb699194db16cb8608834779f560e882f6f9da7c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '3b6eb4a8b782668951bba90be3b5d522f3f7c69b', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: '7a59ab0b12a263c38c40a98acbff6492d370b28b', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'a9eaa5d1959425205c144dc2aa7c7fad77014290', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: 'd70c3a4bf48c9c69625d5f27f1095f9b0744a71e', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: '28f526b1adcd475c2ae88a8bf09ae4aea7935df6', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '700f51d787f20f575e3e11aa72a8da29a9587c2a', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: 'ea72ecc9c2f5055d4b0f6b37cd16cb318f9a797c', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '9d66af2c0c0baef4e8b7b021daf0b4d6adb267d2', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '3f21501c1e08feeee1e7427a42faf1c5d1d9c84d', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: 'b7767b93e090c0195aca6c99b66b48d61b6134b3', sectionTitle: "Payment Method" }),
-            h("div", { key: 'a363c7a7e69932a8ffeddb5e0d53f7df13119a9a', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'fb0e1f64fcec23e513590b3048593565685d8400', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'bc181b1b94039e1aad341a8e563ba923976c806b', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '88b21dd2368b88232cd0f464c381d4423fe3c774', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '040fd71315ead633f9c89e9a9dad906889759d77', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '35ebc74de2c5c8fafd95fc5b15ff4f2ca85220cc', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        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 }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: 'f10eef0b4e4067fb78dbff16719a6f266f4e6bab', sectionTitle: "Payment Method" }),
-            h("div", { key: '6c1ef713b5dcabba5b516f3cbbd088d098873303', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '8880fd0fb2b16ee6f177aba15d6f4485c95af252', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'baa70304d2972f69ce8a5d077a076b16f986745b', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'dcb63b9258bea698bf2d165c611dfa05cb320f30', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '806696c15aa5ef242c230d9c9aea642ddfdfd93d', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: '83289d8f2cf57a624678260555f00af4ea96a566', sectionTitle: 'Metadata' }), h("div", { key: '02e248b962e0c06f4d83bae75a5759b234fea36b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '5d81879c7815102219ed010dab9f573ad6b7985d', metadata: this.payment.metadata })))))));
+            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 })))))));
     }
     static get is() { return "payment-details-core"; }
     static get properties() {

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

@@ -108,15 +108,15 @@ export class PaymentForm {
         }
     }
     render() {
-        return (h(StyledHost, { key: 'f7d035a9ed8b16016493aa07a85a6b4d6d83b5f5' }, h("form", { key: 'fb9354b439332ef4ee67e915f27b60b9b744e6e2', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: '303fbccf9beb30c1d822f0ac148128dfba9d158f', class: "col-12" }, h("justifi-payment-method-selector", { key: 'f71353d3f90ab50461a57ce3738ea853ca4d1cc3', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: 'd9024a406dcde487ff2bb7d34385da0a1be8aef5', class: "col-12" }, h("justifi-payment-method-form", { key: '010488c96f1b6b5af049b89151cea9ce61f263bb', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: config.iframeOrigin, ref: el => {
+        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 => {
                 if (el) {
                     this.paymentMethodFormRef = el;
                 }
-            } })), h("div", { key: 'c8b41e9d6bc0d21db4bc1efa12852480ed4a0bbd', class: "col-12" }, h("justifi-billing-form", { key: '2226122296e6b9da8359b90fe563b6c4342c72f3', legend: "Billing Info", ref: el => {
+            } })), h("div", { key: '41b6830678da64fed9a076d828d03d1caabfe58d', class: "col-12" }, h("justifi-billing-form", { key: '60aaa8e895cdbb45b5f631390b8da7dce271d817', legend: "Billing Info", ref: el => {
                 if (el) {
                     this.billingFormRef = el;
                 }
-            } })), h("slot", { key: '5aa12164db0d1ac4570db49b7a1bc527d974a8ab', name: 'insurance' }), h("div", { key: '5b0ad786dcf96a4c83696b1e3d1cd09345313807', class: "col-12" }, h(Button, { key: 'b3a55eaf9403d33a0e0769ca2c6c42b086f4da9a', 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: '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')))));
     }
     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: 'a0cd592094f7f69955469de84addde1d4bc5af4d', 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: '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]))))));
     }
     static get is() { return "justifi-payment-method-selector"; }
     static get originalStyleUrls() {

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

@@ -69,13 +69,13 @@ export class PaymentsListCore {
     }
     get columnData() {
         return [
-            ['Made On', 'The date and time each payment was made'],
+            ['Date', 'The date and time each payment was made'],
             ['Amount', 'The dollar amount of each payment'],
+            ['Status', 'The current status of each payment'],
+            ['Type', 'The type of each payment'],
             ['Description', 'The payment description, if you provided one'],
-            ['Cardholder', 'The name associated with the payment method'],
+            ['Account Holder', 'The name associated with the payment method'],
             ['Payment Method', 'The brand and last 4 digits of the payment method'],
-            ['Status', 'The current status of each payment'],
-            ['Payment ID', 'The unique identifier of each payment'],
         ];
     }
     get rowData() {
@@ -87,15 +87,15 @@ export class PaymentsListCore {
           <div class="fw-bold">${formatTime(payment.created_at)}</div>
         `,
             },
-            formatCurrency(payment.amount),
-            payment.description,
-            payment.payment_method.payersName,
-            payment.payment_method.lastFourDigits,
+            formatCurrency(payment.amount, true, true),
             {
                 type: 'inner',
                 value: MapPaymentStatusToBadge(payment.status),
             },
-            payment.id,
+            payment.paymentType,
+            payment.description,
+            payment.payment_method.payersName,
+            payment.payment_method.lastFourDigits,
         ]);
     }
     get showEmptyState() {
@@ -109,7 +109,7 @@ export class PaymentsListCore {
     }
     render() {
         var _a, _b;
-        return (h(StyledHost, { key: 'aa139e92669ea06532373a64f08a9926f9ddb4d0', exportparts: tableExportedParts }, h("payments-list-filters", { key: 'd5338eb8899dc99a9633cd892400fc4749edb4b6', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: 'dd452f6a2920ef50fb24324efdf65407f7d964f7', class: "table-wrapper" }, h("table", { key: '64d2d4304549595b80a45ee5684f7ac3cd296245', class: "table table-hover" }, h("thead", { key: '256145c2eea8ac35f1c83663cba68d85287f33fc', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '43a9d75516e80bb5cd04f2575370c863f6413528', 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: 'f95b3b11a9fe046a14a78aaa9f08a5522bead677', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'f92ed5822f5f3946463b89ed746ab641cbf3b2b3', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'ddd2a229c0bb493480504ddcd855d2957b5acedd', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: '0a42c24d04d0cb23804e4a55d185cb9da4b205ab', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
+        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 &&
             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: '20f135407c3d167359b1e2dd1f12b751b31ac80e', class: "sticky-bottom" }, h("tr", { key: 'dae4f695a77846739f2cc80f1e210f0d24d4671e', class: "table-light align-middle" }, h("td", { key: '6f2ed8b9b062a008f521aad3fe7f2ac923316955', part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { key: '18c83657e78378ce8b59d6216479047f7728691f', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+            }))))), 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 })))))))));
     }
     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: '490bab461b6e9f7d3d6296e0d7b59cd0379750a9', params: this.params, clearParams: this.clearParams }, h("div", { key: '03541b6698c5c7fd3f82133e5c391c1a88516a09', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'da16493e48e338b7a44acdfd8adfc74536580c76', class: "p-2" }, h("form-control-text", { key: '5c3c66c184bc1753ce8a8c9dd8644a15338dba27', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.payment_id })), h("div", { key: 'cc1637833295948df93b3fc5e3a9240b8c401840', class: "p-2" }, h("form-control-text", { key: '9201deffdc08ddadbcb4b1b817550116ce5e4eb9', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.terminal_id })), h("div", { key: '8bba67af45d8ae3427c0df2fd7e3e01bfb081ade', class: "p-2" }, h("form-control-select", { key: '9744947523c0ba7f840946b9d21574d93b239efe', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.payment_status })), h("div", { key: '3e15042ad46b11ea1ba086a284a32b7a661362d9', class: "p-2" }, h("form-control-date", { key: '4cb7f7356fb9a3e86834511eefd16c5b3334b976', name: "created_after", label: "Start Date", inputHandler: this.setParamsOnChange, defaultValue: this.params.created_after })), h("div", { key: '88315cc708c3e4e526e0a80f04a114bf0f9600bf', class: "p-2" }, h("form-control-date", { key: '537eee72fc813d0c73d830641db73eadabef5d18', name: "created_before", label: "End Date", inputHandler: this.setParamsOnChange, defaultValue: this.params.created_before })))));
+        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 })))));
     }
     static get is() { return "payments-list-filters"; }
     static get properties() {

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

@@ -52,7 +52,7 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '3ab39ca75aa7f1db8daf8442d2ae9131085375ae' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'c423b3e994e2ceb3b9f641752f1747aa8d8e7b4e', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'e39f07636edbe3527707c538f296133a24a92aa1', 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: '3424ff97b7a41fdbd784a982617af0ab2ff004e7', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'c2584993d369514e2413c7d23a9b731eb2c9135a', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '958856c1acbc34394d2fbc453d9e2dd1f437fe38', title: "ID", value: this.payout.id }), h("div", { key: 'dd097a51e1b02a7624614cb7f554789302e36bcd', class: "m-4" }, h("button", { key: 'f565ec22830ea1fd53e9f14d4f184a4a97e975ea', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'a12b5c5a78c1e21d905a8049537d8775765766d1', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'b3ef435e2cce25f91e3d015098c199a95acfd76e', sectionTitle: "Details" }), h("div", { key: '585f9454474ce9b5691265cfe44309220b737a8a', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '20deb7901ee526c84966e43e020b7aec9ce2d014', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'e0f17db65ed53f3c4b3eff511dcf44784e9d0be5', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '5c665c9b5eca28d09c46367156a586b64bb20ee5', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'e0a39aad45a06185498256859947f8f64312bbc4', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: 'd0fcad35843acf001cc73c0fe3f67ca85fa99007', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '08d127690a8e63e852cd23ed53cc83da77c9de46', sectionTitle: "Account" }), h("div", { key: '1ebc113b76f30abd208374a0cfaa60c3ac6c30d2', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'f61baf5b0e38d0e1c31d9f32109d4eb87a1dcc51', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '01aa558d404b8bb3d170812828ee0929e60bc2c9', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '8298458ba6dc9bcdaa7f992d530e179e3d8a3bc3', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'b15a016b489bd61f55670beec610f49c56659b87', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'cd9e466eaadf645fcabad56c1ee2493e6f5ac11c', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'b30058d0ebd67c91ba182e1e2231ff72d9adf5c5', sectionTitle: 'Metadata' }), h("div", { key: '02876e9c23abea853218c78b99e1b46795af7a93', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '9e6dee3bda335ff836e650741a00b75800da7dab', metadata: this.payout.metadata })))))));
+        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 })))))));
     }
     static get is() { return "payout-details-core"; }
     static get properties() {

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

@@ -139,8 +139,8 @@ export class PayoutsListCore {
         return !this.showEmptyState && !this.showErrorState;
     }
     render() {
-        return (h(StyledHost, { key: 'c160bca06a40b0bde1d0ecf3bbbf081535c23487', exportedparts: tableExportedParts }, h("div", { key: 'ba6b1418212fc79f2eb4a2c4835de9f2df7fd8e9', class: "row gy-3 mb-4" }, h("div", { key: '0c7323ec2551a29df6a9e273e53ca965b4422ce5', class: "col-2" }, h("form-control-date", { key: 'f3cd038ef750e1022e29dba96e201e669f0d2f84', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: '46f0a88e563ace9d4476940abec758721e40d217', class: "col-2" }, h("form-control-date", { key: 'c80de9111c3b4fb9c526c0668b4154753fd78ebd', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("div", { key: '570a74e2c87f2d685f932c5a0182a77a7cf296c0', class: "table-wrapper" }, h("table", { key: 'dba141a302aeb90c45bb64171870bf1cd097576b', class: "table table-hover" }, h("thead", { key: 'ea6fb0e3d3aecf89216d310bc66874602a64af40', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: 'daa4eab66cdaad6af240704f24c1e22f9d1ff999', 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: '1f7ffd08ce54fe4b47560e3465e18bd163065be0', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '8a2668b61449c0a16183bff5a2de120cb8898922', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a419e933f349cc126afac309c0647a985590dfc5', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: 'b3a0267af5bdfdf7ca28caa4b2427437fb6f806f', 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: '11aabf956abf100c8988c7fc0dc6fe1327b0a45d', class: "sticky-bottom" }, h("tr", { key: '37bf8a636469e15cb73d0730e2a2269decc83693', class: "table-light align-middle" }, h("td", { key: '785d2f4b39153842a9a9a0ab40ace7c2a35c6b6c', part: "pagination-bar", colSpan: this.columnData.length }, h("pagination-menu", { key: 'f39e621434687eab1b7fccdfda56cbecfe59d64d', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        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 })))))))));
     }
     static get is() { return "payouts-list-core"; }
     static get properties() {

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

@@ -75,7 +75,7 @@ export class RefundForm {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'bb3d26c841a9697e5881426fb92027e1fff62e9f' }, h("h1", { key: 'b89354d3dec27b3e496af20957fa4d30b7c2e99e' }, "Refund"), this.refundInfoText && (h("div", { key: '493ff3e052c5b28bb382355dd32ebf407446346d', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '72211dc3be8aef8bb87aaff278455170a2be0ed4', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: 'fa22ea217cbb789cd6a4d2798903df20c7a99c3a', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: 'd698a190fbc5f92375cda2707ea54a0b7d7ca4c3', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: '68796a301cea039ba86eaba91e4a63f7db800f47', class: "form-group" }, h("form-control-monetary", { key: '7a03e3d50bad0f932ca69ba7bb8c20cf80d62bc7', 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: 'b4c548b884d7b537a8caa8c91da505af6f6bd6ad', class: "form-group" }, h("form-control-text", { key: '936fb7ee8ce365311c9f368fc7a3c4f183d675ba', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '9b8c5c4175279e8ce5d4d5c10de9ac1e3249bae7', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '8f8a0a878a541d1740d63927d36ad7f2982f83cb', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+        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))))));
     }
     static get is() { return "justifi-refund-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/ui-components/custom-popper/custom-popper.js

@@ -81,7 +81,7 @@ export class CustomPopper {
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: 'ff19898ad40884372621978edd5a44aa4b0a3b53' }, h("style", { key: '9d1c65abf4971046c219312792d9836656dda63a' }, `
+        return (h("div", { key: 'e426fcd8c6ed3026bd19b5f88d9fc8caea6dd2ad' }, h("style", { key: '2c6a3c8606f19df70d7fac866c60a1563456a20f' }, `
           .popper-content {
             display: none;
           }
@@ -89,7 +89,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '50d1dabe33b1b0a3d9c82e8fb68e2aef1e81e549', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '1d1eae013b2e61dd8285c014f388d2c2d68406c5' }))));
+          `), h("div", { key: '3aafc7f4659c0b598586600cc44979c9b7425eae', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '2f338c682141c1610b265d8eca98a34678632c46' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {
@@ -180,12 +180,16 @@ export class CustomPopper {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "HTMLElement",
-                    "resolved": "HTMLElement",
+                    "original": "HTMLElement | SVGElement",
+                    "resolved": "HTMLElement | SVGElement",
                     "references": {
                         "HTMLElement": {
                             "location": "global",
                             "id": "global::HTMLElement"
+                        },
+                        "SVGElement": {
+                            "location": "global",
+                            "id": "global::SVGElement"
                         }
                     }
                 },

package/dist/collection/ui-components/filters/table-filters-menu.js

@@ -19,7 +19,7 @@ export class TableFiltersMenu {
         this.menu.classList.remove('show');
     }
     render() {
-        return (h("div", { key: 'dd6aae6e43579e8f833b1f3f6a6227d2522d79ec', class: "d-flex gap-2" }, h("div", { key: '6decd268cf11d67c3f9e3c2b22e60cbdf328763a', class: "dropdown pb-3" }, h(Button, { key: 'af22247916f55da650da95006e3317316a4122f5', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '0516d664adf8feccb9dd9cb74023241867285bd6', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'd42f891b0b30fa152e03bfe3fbcb12da4707974b', class: "dropdown-menu", part: "dropdown-menu", "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '77eb00715458275e6df23da973103046364f50aa' })))), h("div", { key: 'c9070c2d5ee453cf3a97908514877975c55813b8' }, h(Button, { key: '99b38ff5ac51ee21227832b2200f2dcdec40a70c', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: 'aa914e16d2a733c8b7b6fee24225120d6901f0b5', class: "d-flex gap-2" }, h("div", { key: 'b53ff88da49d4060edfb1b96bf4577babf8e66f8', class: "dropdown pb-3" }, h(Button, { key: '176da3d69ae445dbc46e9c6602258ccb9bdeb515', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '562c6961a08e7b66518d9c2a283ddcb8a5787fa3', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: '28d51e3aaa14f8208c9680b65058d3fd9f85f4d7', class: "dropdown-menu", part: "dropdown-menu", "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: 'f00fb0dafac62c1a4283f1c2eb80c34dadaecd15' })))), h("div", { key: 'b8b9b9c7af5bfd7a20a34be4f28cda59a048f97a' }, h(Button, { key: '46746c3524824bf88120baf7e19c1687c3b8fa71', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
     }
     static get is() { return "table-filters-menu"; }
     static get properties() {

package/dist/collection/utils/utils.js

@@ -1,14 +1,15 @@
 import { format } from "date-fns";
 import Dinero from "dinero.js";
 export const RegExZip = /^\d{5}/;
-export function formatCurrency(amount, withSymbol = true) {
+export function formatCurrency(amount, withSymbol = true, withCurrencyName = false) {
     if (!amount)
         amount = 0;
     function format(amount) {
         const formattedString = withSymbol ? '$0,0.00' : '0,0.00';
         return Dinero({ amount: amount, currency: 'USD' }).toFormat(formattedString);
     }
-    return amount < 0 ? `(${format(-amount)})` : format(amount);
+    const formattedAmount = amount < 0 ? `(${format(-amount)})` : format(amount);
+    return withCurrencyName ? `${formattedAmount} USD` : formattedAmount;
 }
 export function formatPercentage(amount) {
     if (!amount)
@@ -77,22 +78,24 @@ export function extractComputedFontsToLoad() {
 }
 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 'disputed':
-            return "<span class='badge bg-primary' title='The account holder disputed this payment. The amount has been returned and a fee assessed.'>Disputed</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-primary' title='The full amount of this payment has been refunded'>Fully Refunded</span>";
+            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-primary' title='A portion of this payment has been refunded'>Partially Refunded</span>";
-        case 'pending':
-            return "<span class='badge bg-secondary' title='This ACH payment was processed, but the funds haven't settled. It could still succeed or fail.'>Pending</span>";
-        case 'succeeded':
-            return "<span class='badge bg-success' title='This payment was successfully captured'>Successful</span>";
+            return "<span class='badge bg-secondary' title='A portion of this payment has been refunded'>Partially Refunded</span>";
     }
 };
 export const MapPayoutStatusToBadge = (status) => {