@justifi/webcomponents 4.19.3 → 4.20.1

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

@@ -13,13 +13,13 @@ export class TextInput {
                 inputElement.value = newValue || '';
             }
         };
-        this.label = undefined;
         this.name = undefined;
+        this.label = undefined;
+        this.inputHandler = undefined;
+        this.defaultValue = undefined;
         this.helpText = undefined;
         this.errorText = undefined;
-        this.defaultValue = undefined;
         this.maxLength = undefined;
-        this.inputHandler = undefined;
         this.keyDownHandler = undefined;
         this.disabled = undefined;
     }
@@ -30,11 +30,28 @@ export class TextInput {
         this.updateInput(this.defaultValue);
     }
     render() {
-        return (h(Host, { key: '1194532f81831734543bad80860da14f8a5ad856', exportparts: "label,input,input-invalid" }, h("div", { key: '296538cf90b62f8041e21620aa06b4074f68b71a', class: "form-group d-flex flex-column" }, h("label", { key: '7c009ce96124e58f9657dba2565ef298225f10f7', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '4b33cb700aecf4d0a359366ba2e0d248c602d904', 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: '7a279d72bb262fcb044b5b0cc31703878ce9f444', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '00bea288a99f626806697a98b6dca3f3298dc0b3', errorText: this.errorText, name: this.name }))));
+        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 }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {
         return {
+            "name": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -52,12 +69,12 @@ export class TextInput {
                 "attribute": "label",
                 "reflect": false
             },
-            "name": {
-                "type": "any",
+            "inputHandler": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "(name: string, value: string) => void",
+                    "resolved": "(name: string, value: string) => void",
                     "references": {}
                 },
                 "required": false,
@@ -65,11 +82,9 @@ export class TextInput {
                 "docs": {
                     "tags": [],
                     "text": ""
-                },
-                "attribute": "name",
-                "reflect": false
+                }
             },
-            "helpText": {
+            "defaultValue": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -83,10 +98,10 @@ export class TextInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "help-text",
+                "attribute": "default-value",
                 "reflect": false
             },
-            "errorText": {
+            "helpText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -100,10 +115,10 @@ export class TextInput {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "error-text",
+                "attribute": "help-text",
                 "reflect": false
             },
-            "defaultValue": {
+            "errorText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -112,12 +127,12 @@ export class TextInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "default-value",
+                "attribute": "error-text",
                 "reflect": false
             },
             "maxLength": {
@@ -137,21 +152,6 @@ export class TextInput {
                 "attribute": "max-length",
                 "reflect": false
             },
-            "inputHandler": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "(name: string, value: string) => void",
-                    "resolved": "(name: string, value: string) => void",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                }
-            },
             "keyDownHandler": {
                 "type": "unknown",
                 "mutable": false,
@@ -176,7 +176,7 @@ export class TextInput {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""

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

@@ -4,6 +4,7 @@ import { makeGetGrossPaymentChartData } from "./get-gross-payment-chart-data";
 import { ErrorState } from "../details/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
 export class GrossPaymentChart {
     constructor() {
         this.handleErrorEvent = (event) => {
@@ -16,6 +17,7 @@ export class GrossPaymentChart {
         this.errorMessage = null;
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeGetGrossPayment();
     }

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

@@ -3,6 +3,7 @@ import { InsuranceService } from "../../../api/services/insurance.service";
 import { makeGetQuote, makeToggleCoverage } from "../insurance-actions";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../../api/ComponentError";
 import JustifiAnalytics from "../../../api/Analytics";
+import { checkPkgVersion } from "../../../utils/check-pkg-version";
 export class SeasonInterruptionInsurance {
     constructor() {
         this.authToken = undefined;
@@ -26,6 +27,7 @@ export class SeasonInterruptionInsurance {
         return this.seasonInterruptionCoreRef.validate();
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeServiceMethods();
     }
@@ -51,7 +53,7 @@ export class SeasonInterruptionInsurance {
         });
     }
     render() {
-        return (h("justifi-season-interruption-insurance-core", { key: '256d45d39c5d297abb7f955229b0e0e9fbc9504a', 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: '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 }));
     }
     static get is() { return "justifi-season-interruption-insurance"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,6 +4,7 @@ import { makeGetPaymentDetails } from "./get-payment-details";
 import { ErrorState } from "../details/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
 /**
   * @exportedPart detail-loading-spinner
   * @exportedPart detail-loading-state
@@ -40,6 +41,7 @@ export class PaymentDetails {
         this.errorMessage = null;
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeGetPaymentDetails();
     }

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

@@ -6,6 +6,7 @@ import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/Component
 import { getErrorMessage } from "../../api/services/utils";
 import JustifiAnalytics from "../../api/Analytics";
 import { Button, StyledHost } from "../../ui-components";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
 export class PaymentForm {
     constructor() {
         this.bankAccount = undefined;
@@ -20,6 +21,7 @@ export class PaymentForm {
         this.selectedPaymentMethodType = PaymentMethodTypes.card;
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         if (!this.validateProps()) {
             this.errorEvent.emit({
@@ -106,15 +108,15 @@ export class PaymentForm {
         }
     }
     render() {
-        return (h(StyledHost, { key: '38bd6cca38d9068fa9277a8568a98f261a4cc616' }, h("form", { key: 'fec19f5e2f11934e6783124c4c437a2d3947f596', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: '18001f78e03336d01de8473a57e3e228e9fce201', class: "col-12" }, h("justifi-payment-method-selector", { key: '260ac1ade3ccfe6baf518eb856bdf4d380025620', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: 'f6ade2336314e05f2bdce75df8577939efe33e3b', class: "col-12" }, h("justifi-payment-method-form", { key: 'ad8e5b121b8425175f7ac7f38ab24dfba1801a28', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: config.iframeOrigin, ref: el => {
+        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 => {
                 if (el) {
                     this.paymentMethodFormRef = el;
                 }
-            } })), h("div", { key: '29f15f1cece3e07a569e514d08bf9996405699c6', class: "col-12" }, h("justifi-billing-form", { key: '9928924cc29bfa5c5e46ada294cb26da0c1d222b', legend: "Billing Info", ref: el => {
+            } })), h("div", { key: 'c8b41e9d6bc0d21db4bc1efa12852480ed4a0bbd', class: "col-12" }, h("justifi-billing-form", { key: '2226122296e6b9da8359b90fe563b6c4342c72f3', legend: "Billing Info", ref: el => {
                 if (el) {
                     this.billingFormRef = el;
                 }
-            } })), h("slot", { key: 'c36583ab34bc105b506df27aec02898455855cec', name: 'insurance' }), h("div", { key: 'cc38292ae8a59bc6f4624a8535e8b7c93e6f3a35', class: "col-12" }, h(Button, { key: 'e5fe0f50ee2322ab2a199a6229015c9daa198cc0', 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: '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')))));
     }
     static get is() { return "justifi-payment-form"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,6 +3,7 @@ import { pagingDefaults } from "../../api";
 import { MapPaymentStatusToBadge, formatCurrency, formatDate, formatTime } from "../../utils/utils";
 import { tableExportedParts } from "../table/exported-parts";
 import { StyledHost, TableEmptyState, TableErrorState, TableLoadingState } from "../../ui-components";
+import { onFilterChange } from "../../ui-components/filters/utils";
 export class PaymentsListCore {
     constructor() {
         this.handleClickPrevious = (beforeCursor) => {
@@ -21,15 +22,19 @@ export class PaymentsListCore {
                 return;
             this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));
         };
-        this.handleDateChange = (name, value) => {
-            this.params = Object.assign(Object.assign({}, this.params), { [name]: value });
+        this.setParamsOnChange = (name, value) => {
+            let newParams = { [name]: value };
+            this.params = onFilterChange(newParams, this.params);
+        };
+        this.clearParams = () => {
+            this.params = {};
         };
-        this.getPayments = undefined;
         this.payments = [];
         this.loading = true;
         this.errorMessage = undefined;
         this.paging = pagingDefaults;
-        this.params = undefined;
+        this.params = {};
+        this.getPayments = undefined;
     }
     updateOnPropChange() {
         this.fetchData();
@@ -78,8 +83,8 @@ export class PaymentsListCore {
             {
                 type: 'head',
                 value: `
-          <div class='fw-bold'>${formatDate(payment.created_at)}</div>
-          <div class='fw-bold'>${formatTime(payment.created_at)}</div>
+          <div class="fw-bold">${formatDate(payment.created_at)}</div>
+          <div class="fw-bold">${formatTime(payment.created_at)}</div>
         `,
             },
             formatCurrency(payment.amount),
@@ -104,8 +109,8 @@ export class PaymentsListCore {
     }
     render() {
         var _a, _b;
-        return (h(StyledHost, { key: 'e4a4b64b2927a009f7ad4e9e2ebb4c020401423c', exportparts: tableExportedParts }, h("div", { key: '6ac1c84338b84972ca9b001ecd2b90134c99de6b', class: "row gy-3 mb-4" }, h("div", { key: '1d279ec66bc0755b876e29f06ac24d51baa77caa', class: "col-2" }, h("form-control-date", { key: '65b29c031021f3f782c9a4597167dc5e3a44e7da', name: "created_after", label: "Start Date", inputHandler: this.handleDateChange })), h("div", { key: 'a032497a94cc8108fda6efbb741069407e1a5afe', class: "col-2" }, h("form-control-date", { key: '5dd62ebdbf3836567a9ccb03dec850ebe675cb79', name: "created_before", label: "End Date", inputHandler: this.handleDateChange }))), h("div", { key: 'be4094afd3aec1d742d9d3245c2f6fc50cb95fa0', class: "table-wrapper" }, h("table", { key: 'ed493e35f2bddd59d1034dffe2bcd8b54a6390d6', class: "table table-hover" }, h("thead", { key: 'fae77bda1ffc35ac5414743ab51c2fe1dfbbc29e', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '5be3b1e9883d337046c386046565fb6ac3366324', 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: 'ba950a1da1ec0dffd7bc8457cdb3ce65d0f8b69b', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '8d13d8f6b64377f560d06410c09d24293708b6a8', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'c75d61977b26ca5d4aa3711bae1ce6e571b3e3b2', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: '08e3f88116de5783f018a0c06d21d0d9cc4f5feb', 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) => {
+        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 &&
+            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) {
                     return h("td", { part: "table-cell", innerHTML: dataEntry.value });
@@ -113,7 +118,7 @@ export class PaymentsListCore {
                 else {
                     return h("td", { part: "table-cell" }, dataEntry);
                 }
-            }))))), this.paging && (h("tfoot", { key: '728f671ab03923c90e11901a0d3aac4bc30e72a7', class: "sticky-bottom" }, h("tr", { key: 'd0df9b7c857287eec9568157ecf8f547a01f2fc5', class: "table-light align-middle" }, h("td", { key: 'e0de54912240b3e812f37ea675b2eef50d9545c4', part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { key: 'f2d7846030a5aaa0c2311cad61f4d5865440a904', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+            }))))), 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 })))))))));
     }
     static get is() { return "payments-list-core"; }
     static get properties() {

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

@@ -0,0 +1,84 @@
+import { h } from "@stencil/core";
+import { debounce } from "lodash";
+export class PaymentsListFilters {
+    constructor() {
+        this.params = {};
+        this.setParamsOnChange = undefined;
+        this.clearParams = undefined;
+    }
+    componentWillLoad() {
+        // debounced input handler for text input
+        this.debouncedSetParamsOnChange = debounce(this.setParamsOnChange, 300);
+    }
+    get paymentStatusOptions() {
+        return [
+            { label: 'All', value: '' },
+            { label: 'Pending', value: 'pending' },
+            { label: 'Authorized', value: 'authorized' },
+            { label: 'Succeeded', value: 'succeeded' },
+            { label: 'Failed', value: 'failed' },
+            { label: 'Disputed', value: 'disputed' },
+            { label: 'Refunded', value: 'refunded' }
+        ];
+    }
+    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 })))));
+    }
+    static get is() { return "payments-list-filters"; }
+    static get properties() {
+        return {
+            "params": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaymentsParams",
+                    "resolved": "PaymentsParams",
+                    "references": {
+                        "PaymentsParams": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::PaymentsParams"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "{}"
+            },
+            "setParamsOnChange": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(name: string, value: string) => void",
+                    "resolved": "(name: string, value: string) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "clearParams": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+}

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

@@ -4,6 +4,8 @@ import { makeGetPayments } from "./get-payments";
 import { ErrorState } from "../details/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
+import { config } from "../../../config";
 /**
   * @exportedPart label: Label for inputs
   * @exportedPart input: The input fields
@@ -32,12 +34,14 @@ 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();
         this.analytics = new JustifiAnalytics(this);
         this.initializeGetPayments();
     }
@@ -53,6 +57,7 @@ export class PaymentsList {
                 id: this.accountId,
                 authToken: this.authToken,
                 service: new PaymentService(),
+                apiOrigin: this.apiOrigin,
             });
         }
         else {
@@ -107,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: 'fdf7905cdc7696414b765d61d0f78c7193cbbc76' }, this.loading && LoadingState(), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'f79827c287d68484a87232ae956a1c15e3d7044d', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'dfa9c228f2cd1b0b2d14dc6ce44478ee8fc35d00', 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: '6b5907e3f7753d4e2f6ba59bfe509d97e2a4c1c0', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '63b7497217a00268190eaea1475639fc5e0b43ca', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'e26e56abbac3e12584c187f6f1b560b0f4b33a6f', title: "ID", value: this.payout.id }), h("div", { key: 'e84dd653fb1adc566b0afbfdfc87cce40ed47280', class: "m-4" }, h("button", { key: 'fac0022786dc03349a65dc54729dc2f508c9441f', class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '9cf642b803c59146895b762eaff40f5026c9f94b', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '90ed8aafabf9eebb47da15c6c8b8d1f527d23557', sectionTitle: "Details" }), h("div", { key: '592b8489fa30441bbf11a52d3daf6a2debcc121f', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '0885f3ece509936d1e1bad64d4a998fbc487ee3a', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'b8a7da2bfeada94c8c7c080b516c1bc7fc26f414', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'd8928341e89161d4bafc2940f1aa738b345779dd', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '570bd2a2d44f094870e61debca61c2b5aa772679', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '2882865db185d1668103d819e62cf61edc711697', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'f9735ff73c650ad318d771df5c22c7d8834a09f6', sectionTitle: "Account" }), h("div", { key: 'd7d53fd77e704035a19dc15bc04ee06dfaa0c51a', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '486ae1c4ae990928bf24cc687cb4456bbc6e18ea', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '528d7d6a299aa1019125f34fc903ea622d09de53', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'eafb132e84de81d41bd154aec55974d8496995dd', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '7f565f8dfacab4cf8edc7025d839dff1d8de2719', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '61338f5ed539d70b4caa08ffa200d8e47f52ebde', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'cea128826f004ece9e6c29c97c07e98a3d45706c', sectionTitle: 'Metadata' }), h("div", { key: 'bf884c3dafa50cd1b8e0d98711f0fe5fc9d60391', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '2d92e2f8d6f032cbaff741da43ca97424b8decaf', metadata: this.payout.metadata })))))));
+        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 })))))));
     }
     static get is() { return "payout-details-core"; }
     static get properties() {

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

@@ -5,6 +5,7 @@ import { ErrorState } from "../details/utils";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { makeGetPayoutCSV } from "./get-payout-csv";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
 export class PayoutDetails {
     constructor() {
         this.handleErrorEvent = (event) => {
@@ -18,6 +19,7 @@ export class PayoutDetails {
         this.errorMessage = null;
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeServices();
     }

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: '594c52003f897f4c50f79935e42a7042fb5ec168', exportedparts: tableExportedParts }, h("div", { key: 'f2b1d971e1e7bc5596459c071c3aa931ba4cb4b9', class: "row gy-3 mb-4" }, h("div", { key: 'd98e3ed56421493a60bd0a285079aa99ae705506', class: "col-2" }, h("form-control-date", { key: 'c9c899884bcc6fa6d306b95473ef0a7354e57bd5', name: "created_after", label: "Date from:", inputHandler: this.handleDateChange })), h("div", { key: '0059a75bf2f478b107d59bd9d7cc29de10dffe57', class: "col-2" }, h("form-control-date", { key: 'ef9a31ac8a8e7336386664b70289ee34677152a4', name: "created_before", label: "Date to:", inputHandler: this.handleDateChange }))), h("div", { key: '65da1114a66ac4cdf8d6ec012a42b2f760af5c76', class: "table-wrapper" }, h("table", { key: 'd68d8f61835cc4dc5dc988ff61843e6254494ace', class: "table table-hover" }, h("thead", { key: 'aa691db8fbfbcdad59acbdc1ef38497b552928ab', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: 'aa9f61cbf05b9420026861cb14e6a30a6c9e347e', 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: 'cf0127f26e8bc5b7afbbfc4a36fab4de948d1727', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'd6b832786c4959176974c7a343442c8d1c50b5c2', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '398a20957f76ba14e1b0677fbd6fbfbacce61fbb', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: 'd9f755a07a6f8cd4967eac60beff92f36322dcdd', 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: '503fa3a3a7ffe5d52b614153b286dd0326c02091', class: "sticky-bottom" }, h("tr", { key: 'e3af74b96bfc1f5ac1f0f0655eaed096102d0e89', class: "table-light align-middle" }, h("td", { key: 'a53f9d37181ea29a9fcb6ab46b2daf7cc66509be', part: "pagination-bar", colSpan: this.columnData.length }, h("pagination-menu", { key: 'b0779289444747e0b18bb63e6a17cdc89bd390ca', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+        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 })))))))));
     }
     static get is() { return "payouts-list-core"; }
     static get properties() {

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

@@ -6,6 +6,7 @@ import { ErrorState } from "../details/utils";
 import { ComponentErrorCodes } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
 import { makeGetPayoutCSV } from "../payout-details/get-payout-csv";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
 /**
   * @exportedPart label: Label for inputs
   * @exportedPart input: The input fields
@@ -41,6 +42,7 @@ export class PayoutsList {
         this.errorMessage = null;
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeServices();
     }

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

@@ -75,7 +75,7 @@ export class RefundForm {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: 'd0d0962eaecab749aa1eb124e86701a2fb4dfd53' }, h("h1", { key: 'cb3071d89c291b1664e551fcf2808a64569ba5eb' }, "Refund"), this.refundInfoText && (h("div", { key: '01a6f4567f882d2eec492ef6d98db7d04747ecb4', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: '8ae5928aaf8ead35a7ad180a01bdde05ebec3d5f', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: '425a7dfe9d8b886b55fd0878f3989373733c1758', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '5516d2ac500611d2410b9b4c2a4d0d15e417b2d1', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: 'b67a7c56f070a5a25d91aa0cc77755b27d420fdc', class: "form-group" }, h("form-control-monetary", { key: '76b6cfdf2b39674434f4d880333dd5d5f603f0b6', 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: '5e581cdea69d2ce9dbad774214cd904923d199b3', class: "form-group" }, h("form-control-text", { key: '926ae888676a4089d3381bd4d650e6f84f6e206a', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: 'de5df506b7b64a69a16241f117bf9bea4fd79b57', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '92ad4d43677587c2c20dc03c6f03a6cf1f20ac12', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+        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))))));
     }
     static get is() { return "justifi-refund-form"; }
     static get encapsulation() { return "shadow"; }