@justifi/webcomponents 4.19.3-rc-2 → 4.20.0

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

@@ -1,10 +1,12 @@
 import { h } from "@stencil/core";
 import { PaymentMethodTypes } from "../../api";
 import { loadFontsOnParent } from "../../utils/utils";
+import { config } from "../../../config";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 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;
@@ -19,6 +21,7 @@ export class PaymentForm {
         this.selectedPaymentMethodType = PaymentMethodTypes.card;
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         if (!this.validateProps()) {
             this.errorEvent.emit({
@@ -105,15 +108,15 @@ export class PaymentForm {
         }
     }
     render() {
-        return (h(StyledHost, { key: '8cb6e3903a0045fbffed5f17dc29aacc6b57ad7f' }, h("form", { key: '4e8f00c3d29c0db0bc99fd79da46abe7c40e3e30', class: "row gy-3" }, this.showPaymentMethodTypeSelector() && (h("div", { key: '344a1356f6f482493a35015c32f8e9a9b4cc8a80', class: "col-12" }, h("justifi-payment-method-selector", { key: '36b9dd7a9bc8336b4bef0d12f56c811effbc0a0b', selectedPaymentMethodType: this.getSelectedPaymentMethodType(), onPaymentMethodSelected: event => this.paymentMethodSelectedHandler(event) }))), h("div", { key: '225a260f817f9dd02a7f0a5b25562179ab80f7de', class: "col-12" }, h("justifi-payment-method-form", { key: '52e2bf20b265cc96ab556571a323370cc27ac278', "payment-method-form-type": this.getSelectedPaymentMethodType(), iframeOrigin: IFRAME_ORIGIN, 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: '433a8ac42c0eec9180e37da222da1dbb1112e48e', class: "col-12" }, h("justifi-billing-form", { key: '4f24f1c8b4083e2d9e5bb2272d32d20bb5cc225d', 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: '9397ae7fdd2677cd61a425fcf5818ae14fabbed0', name: 'insurance' }), h("div", { key: 'db9131f6f35165e69d3b59da7fa25b95f1e46168', class: "col-12" }, h(Button, { key: 'c280836cf6445a7132ff9202a09b6fdac8e29f77', 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/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: '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 })))));
+    }
+    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,7 @@ 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";
 /**
   * @exportedPart label: Label for inputs
   * @exportedPart input: The input fields
@@ -38,6 +39,7 @@ export class PaymentsList {
         this.errorMessage = null;
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeGetPayments();
     }

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: '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 })))))));
     }
     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: '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 })))))))));
     }
     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

@@ -2,6 +2,7 @@ import { h, } from "@stencil/core";
 import RefundFormSchema from "./refund-form-schema";
 import { Api } from "../../api";
 import { FormController } from "../form/form";
+import { config } from "../../../config";
 import { CURRENCY_MASK } from "../../utils/form-input-masks";
 import { StyledHost } from "../../ui-components";
 export class RefundForm {
@@ -70,11 +71,11 @@ export class RefundForm {
         if (!this.authToken) {
             console.warn('Warning: Missing auth-token.');
         }
-        this.api = Api({ authToken: this.authToken, apiOrigin: PROXY_API_ORIGIN });
+        this.api = Api({ authToken: this.authToken, apiOrigin: config.proxyApiOrigin });
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '8d31f1a9bf936c9e11f8eca1dc55e614b9fa5939' }, h("h1", { key: 'be589740535ee8a5ab6d4af7151d7ae026f08002' }, "Refund"), this.refundInfoText && (h("div", { key: 'b1d40507dec53bac422f99a3d62678c78c0c2038', class: "d-flex align-items-center flex-row gap-4 border-top border-bottom my-4 p-3", role: "alert" }, h("img", { key: 'cc76014eef0d826bec5ec09355dc5fc747fd2070', src: "/info-icon.svg", alt: "Information", height: "30", width: "30" }), h("p", { key: 'c2efa0f2acdf3faaa6e2974d0535f48799e3cbbd', class: "m-0", innerHTML: this.refundInfoText }))), h("form", { key: '68220114781378f6507651414c87532171bebb31', onSubmit: e => this.handleSubmit(e), class: "d-grid gap-4" }, h("div", { key: '075545e9837316fe160760e0dba9a5104654dd2b', class: "form-group" }, h("form-control-monetary", { key: 'c8ff8a822d2b74b2f80b33cd6cd2b42ceebbff11', 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: '92093284e763466be5138ea6d788145d5d47bd87', class: "form-group" }, h("form-control-text", { key: 'ddf9e221d43d84ad7436261c5755e673224aa82e', name: "notes", label: "Additional Notes", inputHandler: (name, value) => this.handleInput(name, value), errorText: this.errors.notes })), this.withButton && (h("div", { key: '58abbbabce09d82da4032ef0e08e6cfac1433153', class: "form-group d-flex flex-row-reverse" }, h("button", { key: '3e703ef633e0d45ba70425dc6d58bcd2d590ce1b', type: "submit", disabled: !!this.isSubmitting, class: "btn btn-primary ml-auto" }, this.submitButtonText))))));
+        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))))));
     }
     static get is() { return "justifi-refund-form"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,239 @@
+import { h } from "@stencil/core";
+import { createPopper } from "@popperjs/core";
+export class CustomPopper {
+    constructor() {
+        this.placement = 'bottom';
+        this.offset = [0, 10];
+        this.strategy = 'absolute';
+        this.trigger = 'click';
+        this.anchorRef = undefined;
+        this.isOpen = false;
+    }
+    componentDidLoad() {
+        this.popperInstance = createPopper(this.anchorRef, this.popperContentRef, this.popperOptions);
+        if (this.trigger === 'click') {
+            window.addEventListener('click', this.handleClick.bind(this));
+        }
+        else if (this.trigger === 'hover') {
+            this.anchorRef.addEventListener('mouseenter', this.show.bind(this));
+            this.anchorRef.addEventListener('mouseleave', this.hide.bind(this));
+            this.popperContentRef.addEventListener('mouseenter', this.show.bind(this));
+            this.popperContentRef.addEventListener('mouseleave', this.hide.bind(this));
+        }
+        else if (this.trigger === 'focus') {
+            this.anchorRef.addEventListener('focus', this.show.bind(this));
+            this.anchorRef.addEventListener('blur', this.hide.bind(this));
+        }
+    }
+    disconnectedCallback() {
+        if (this.trigger === 'click') {
+            window.removeEventListener('click', this.handleClick.bind(this));
+        }
+        else if (this.trigger === 'hover') {
+            this.anchorRef.removeEventListener('mouseenter', this.show.bind(this));
+            this.anchorRef.removeEventListener('mouseleave', this.hide.bind(this));
+            this.popperContentRef.removeEventListener('mouseenter', this.show.bind(this));
+            this.popperContentRef.removeEventListener('mouseleave', this.hide.bind(this));
+        }
+        else if (this.trigger === 'focus') {
+            this.anchorRef.removeEventListener('focus', this.show.bind(this));
+            this.anchorRef.removeEventListener('blur', this.hide.bind(this));
+        }
+    }
+    handleClick(event) {
+        const path = event.composedPath();
+        const isAnchorClicked = path.includes(this.anchorRef);
+        const isPopperContentClicked = path.includes(this.popperContentRef);
+        if (!this.isOpen && isAnchorClicked) {
+            this.show();
+        }
+        else if (this.isOpen && !isPopperContentClicked) {
+            this.hide();
+        }
+        else if (this.isOpen && isAnchorClicked) {
+            this.hide();
+        }
+    }
+    get popperOptions() {
+        return {
+            placement: this.placement,
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: this.offset,
+                    },
+                },
+            ],
+            strategy: this.strategy,
+        };
+    }
+    show() {
+        this.isOpen = true;
+        this.popperContentRef.setAttribute('data-show', '');
+        this.popperInstance.update();
+        this.showEvent.emit();
+    }
+    hide() {
+        this.isOpen = false;
+        this.popperContentRef.removeAttribute('data-show');
+        this.popperInstance.update();
+        this.hideEvent.emit();
+    }
+    render() {
+        return (h("div", { key: '2fd0d1c55f982d9882b17f26c1e997de8de53768' }, h("style", { key: 'ae7fb7b0eae12cfcea357299b6457f523831ac12' }, `
+          .popper-content {
+            display: none;
+          }
+          .popper-content[data-show] {
+            display: block;
+            z-index: 1030;
+          }
+          `), h("div", { key: '2c747dff168ef5e84642d5c490ffa4e8fc5c2350', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '720f23f2a51da2bb9de5c17d7a548d5ddf90ea53' }))));
+    }
+    static get is() { return "custom-popper"; }
+    static get properties() {
+        return {
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@popperjs/core",
+                            "id": "../../node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/index.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'bottom'"
+            },
+            "offset": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "[number, number]",
+                    "resolved": "[number, number]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[0, 10]"
+            },
+            "strategy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PositioningStrategy",
+                    "resolved": "\"absolute\" | \"fixed\"",
+                    "references": {
+                        "PositioningStrategy": {
+                            "location": "import",
+                            "path": "@popperjs/core",
+                            "id": "../../node_modules/.pnpm/@popperjs+core@2.11.8/node_modules/@popperjs/core/index.d.ts::PositioningStrategy"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "strategy",
+                "reflect": false,
+                "defaultValue": "'absolute'"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "trigger",
+                "reflect": false,
+                "defaultValue": "'click'"
+            },
+            "anchorRef": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "showEvent",
+                "name": "showEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "hideEvent",
+                "name": "hideEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}