@justifi/webcomponents 4.20.0 → 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/get-payments.js

@@ -1,10 +1,10 @@
 import { Payment } from "../../api";
 import { ComponentErrorSeverity } from "../../api/ComponentError";
 import { getErrorCode, getErrorMessage } from "../../api/services/utils";
-export const makeGetPayments = ({ id, authToken, service }) => async ({ params, onSuccess, onError }) => {
+export const makeGetPayments = ({ id, authToken, service, apiOrigin }) => async ({ params, onSuccess, onError }) => {
     var _a, _b;
     try {
-        const response = await service.fetchPayments(id, authToken, params);
+        const response = await service.fetchPayments(id, authToken, params, apiOrigin);
         if (!response.error) {
             const pagingInfo = Object.assign({}, response.page_info);
             const payments = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.map((dataItem) => new Payment(dataItem))) || [];

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: 'a81248110bcd05439e30713258b5f6df2967cb92', class: "p-2" }, h("form-control-text", { key: '713e549345668620d52e0e3938f787b4638571eb', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.params.terminal_id })), h("div", { key: 'c6f5e2fc92998de7672a3702e68fba3e7b86fe56', class: "p-2" }, h("form-control-select", { key: 'df5c15aeb9f2e5644637d28045f7ba2b3f0671a1', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.params.payment_status })), h("div", { key: '80b462eea933c079ca178e67fcb7c66fe40e2835', class: "p-2" }, h("form-control-date", { key: '23c520165674f69aa589ae134a06342a7003fbd6', name: "created_after", label: "Start Date", inputHandler: this.setParamsOnChange, defaultValue: this.params.created_after })), h("div", { key: '957f6585b0c6d7292748d57e4a9b31ca9e8588fb', class: "p-2" }, h("form-control-date", { key: 'ee29803a5076cb217ea45d4c602edbf64c5beced', 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/payments-list/payments-list.js

@@ -5,6 +5,7 @@ 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";
 /**
   * @exportedPart label: Label for inputs
   * @exportedPart input: The input fields
@@ -33,10 +34,11 @@ export class PaymentsList {
             this.errorMessage = event.detail.message;
             this.errorEvent.emit(event.detail);
         };
-        this.accountId = undefined;
-        this.authToken = undefined;
         this.getPayments = undefined;
         this.errorMessage = null;
+        this.accountId = undefined;
+        this.authToken = undefined;
+        this.apiOrigin = config.proxyApiOrigin;
     }
     componentWillLoad() {
         checkPkgVersion();
@@ -55,6 +57,7 @@ export class PaymentsList {
                 id: this.accountId,
                 authToken: this.authToken,
                 service: new PaymentService(),
+                apiOrigin: this.apiOrigin,
             });
         }
         else {
@@ -109,6 +112,24 @@ export class PaymentsList {
                 },
                 "attribute": "auth-token",
                 "reflect": false
+            },
+            "apiOrigin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "api-origin",
+                "reflect": false,
+                "defaultValue": "config.proxyApiOrigin"
             }
         };
     }

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

@@ -52,7 +52,7 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'f04c333617b7a76f89042b248a6d778f66d5c6cb' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '8d05338158cc2d7305d8af3ba2a513dc8481741b', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '366a34f922b79a0cf7b7e7ae214c7607ea24a5b4', 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: '656abf0e42ae7a80e845c03b8c6a928776dc0d07', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'db958e6aa16d1048f80b4819094df79d91900bca', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '091347549f20f22b1378297d16414488cd061c5b', title: "ID", value: this.payout.id }), h("div", { key: '551b4dc10f526de23370b08067014c8152f51c13', class: "m-4" }, h("button", { key: '5533b69b46df20a4142d1d4747697db6712d5576', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '351d58be5436416a67ae51e62d56114948bc3913', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '652ef08edf5810d7330107547e628fe71995350b', sectionTitle: "Details" }), h("div", { key: 'c2a142799c0c2e00f7075e9b5c97fa8dab0f41c8', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '0e8fc0971294ffa8b514e3bb88de867c95e922f4', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '5bf5664f84ab30f684046d99d30f2431faa34f0b', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '8d0773a79dea5984cd71f67dfcc6d293756a9df3', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '8fbb6b45a5650d1066991ab78cc76533ce786464', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: 'b67100e8ba24bdbd4b8e119b7b3c5d8c4cce7e89', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '57ffa572fff5333777d4ca51e3951eebadeef9ed', sectionTitle: "Account" }), h("div", { key: '8ddcd2c7034cdb54926b1127f11c7793bdf00e09', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'eb67dfb4a90d6ed275675a9364453393b2231493', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '62718960d90f6d79fb89ec962bfe0ee9058967ed', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'bd8477ca9f112054e05da17c3a28cbfef34233c3', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '58b3959f17fb7294e44f195da0617744a6ac1932', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '14ac9081e23cd608e0f25652d217c407a14b3afa', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: '4bf77ec534c0c44e7550d3141330dc71642dae85', sectionTitle: 'Metadata' }), h("div", { key: 'b0c019b0c13bb966a13370326679bfd7e652ceb7', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '2409ce5416d91df6a38db07bd58041b49cbdd736', 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: 'c88e9dcab68723440f7ad47f526062f4fcda8f4f', exportedparts: tableExportedParts }, h("div", { key: 'b13a1f79bfba76fdb419aabe3b431b0635ee3e85', class: "row gy-3 mb-4" }, h("div", { key: '1fa57ea19b1d41fcac7a04e327ba4b21ed85eafb', class: "col-2" }, h("form-control-date", { key: '55d59be93d4d02c0e6167eb50710eae18f49dc06', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: '24385e4d4f590ffb6b7ecff89320c1a87d71126f', class: "col-2" }, h("form-control-date", { key: 'ed249c729426708374fb69b3d169111a30a76dff', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("div", { key: '6be333c9a3263b15133761367d7a2ee796c9524a', class: "table-wrapper" }, h("table", { key: '97ac365de170c104db10742fc0c626006bd70e47', class: "table table-hover" }, h("thead", { key: '4673ee790f8e8f1d9a997cb20412d60fefe77ff4', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '8067c08e488007909f84cf89dddf0b30a315444b', 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: 'd872bc8f1cd0301de6d7784ec109aa14d04ed9d5', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '761841567c65b07d8875ac5a97138c3e5388d388', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a1f92c9da78ac90454451788970fb7971eb4131f', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: 'e60d36c840f97fa48ba9b575d013efaa59653cc8', 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: '3302c26fbf7a0fd0632aee60b0bb8ee105404d17', class: "sticky-bottom" }, h("tr", { key: '3768a133e08940cb7ce3944f855fc0d6ace429ef', class: "table-light align-middle" }, h("td", { key: '9ad8ab1254b998b12436bf5330d0d1d96b8a2f6e', part: "pagination-bar", colSpan: this.columnData.length }, h("pagination-menu", { key: '9664a7f0e5e1ee4ac366574dce1669d613871094', 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: '317b405be6fae390e20b7bf8586aced9fdf5e246' }, h("h1", { key: 'e27cd7c30b74eae1be005dfd17cc4a33411024d1' }, "Refund"), this.refundInfoText && (h("div", { key: '00298ad8bd4a0c5e56d78e94f2b9da8b3ad065df', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: 'e32db4b03e42a6e8180b10e99a7a7de94e753850', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: 'd63e3a790338bd5c3ac9f304aaa01b65928bd34e', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: 'a5cb24ef9f8214e37398d4c2eb790f0c5ffb5a18', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: 'c8e24f30f8db93bef5e6b56d9eea5208aa768f94', class: "form-group" }, h("form-control-monetary", { key: 'a52701bc026714e8e0851eeff6c8458385f2f5da', 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: 'e2ff04104c47d2852da925de074b1667dcc684f4', class: "form-group" }, h("form-control-text", { key: '8567d4f6082642919e2a132511af6eb9f393cd65', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '6634bfd2156b45f189c4c4b630983712bbc5baa4', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '1a0c80e5ee42673d09f9d7f9a36acc2f4ea52f8b', 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: '2fd0d1c55f982d9882b17f26c1e997de8de53768' }, h("style", { key: 'ae7fb7b0eae12cfcea357299b6457f523831ac12' }, `
+        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: '2c747dff168ef5e84642d5c490ffa4e8fc5c2350', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '720f23f2a51da2bb9de5c17d7a548d5ddf90ea53' }))));
+          `), 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: '26c76e4989db63505bbb6d4ecfed10f964839c73', class: "d-flex gap-2" }, h("div", { key: '5b9b28d3c1daeb5c38fd5f2fb2529e8251f6d193', class: "dropdown pb-3" }, h(Button, { key: '45adcccffe23b4d357f0870f961eecfa0a8b3199', 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: '8f381f3db3956a642107bba64f2a2a4370bae2cf', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: '8e5cb0a64848e0720732fc95206deaf56ca338c9', class: "dropdown-menu", part: "dropdown-menu", "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: 'a102749963913d0a58e0210ea9c3bf3d4a14c1f3' })))), h("div", { key: 'ac38e6b46ce79967e66da4d40c0778df0b07e1a6' }, h(Button, { key: '2c8ef6ff571121b8cab1b17f2ac7035792f1d7f4', 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) => {