@justifi/webcomponents 5.4.4 → 5.5.0

package/dist/module/payment-method-options.js

@@ -1,42 +1,27 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { P as PaymentMethodTypes } from './Payment.js';
-import { d as defineCustomElement$3, P as PaymentMethodOption } from './saved-payment-method.js';
-import { d as defineCustomElement$i } from './bank-account-form2.js';
-import { d as defineCustomElement$h } from './billing-form2.js';
-import { d as defineCustomElement$g } from './card-form2.js';
-import { d as defineCustomElement$f } from './custom-popper2.js';
-import { d as defineCustomElement$e } from './form-control-checkbox2.js';
-import { d as defineCustomElement$d } from './form-control-help-text3.js';
-import { d as defineCustomElement$c } from './form-control-radio2.js';
-import { d as defineCustomElement$b } from './form-control-select2.js';
-import { d as defineCustomElement$a } from './form-control-text2.js';
-import { d as defineCustomElement$9 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$8 } from './hidden-input2.js';
-import { d as defineCustomElement$7 } from './iframe-input2.js';
-import { d as defineCustomElement$6 } from './billing-form-wrapper.js';
-import { d as defineCustomElement$5 } from './new-payment-method.js';
-import { d as defineCustomElement$4 } from './save-new-payment-method.js';
-import { d as defineCustomElement$2 } from './sezzle-payment-method.js';
-import { d as defineCustomElement$1 } from './postal-form2.js';
+import { d as defineCustomElement$2, P as PaymentMethodOption } from './saved-payment-method.js';
+import { d as defineCustomElement$g } from './bank-account-form2.js';
+import { d as defineCustomElement$f } from './card-form2.js';
+import { d as defineCustomElement$e } from './custom-popper2.js';
+import { d as defineCustomElement$d } from './form-control-checkbox2.js';
+import { d as defineCustomElement$c } from './form-control-help-text2.js';
+import { d as defineCustomElement$b } from './form-control-radio2.js';
+import { d as defineCustomElement$a } from './form-control-select2.js';
+import { d as defineCustomElement$9 } from './form-control-text2.js';
+import { d as defineCustomElement$8 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$7 } from './hidden-input2.js';
+import { d as defineCustomElement$6 } from './iframe-input2.js';
+import { d as defineCustomElement$5 } from './billing-form.js';
+import { d as defineCustomElement$4 } from './new-payment-method.js';
+import { d as defineCustomElement$3 } from './save-new-payment-method.js';
+import { d as defineCustomElement$1 } from './sezzle-payment-method.js';
 
 const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMethodOptions extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.showCard = undefined;
-        this.showAch = undefined;
-        this.showBnpl = undefined;
-        this.showSavedPaymentMethods = undefined;
-        this.paymentMethodGroupId = undefined;
-        this.bnpl = undefined;
-        this.insuranceToggled = undefined;
-        this.authToken = undefined;
-        this.accountId = undefined;
         this.savedPaymentMethods = [];
-        this.paymentAmount = undefined;
-        this.hideCardBillingForm = undefined;
-        this.iframeOrigin = undefined;
-        this.selectedPaymentMethodId = undefined;
         this.paymentMethodOptions = [];
     }
     async fillBillingForm(fields) {
@@ -77,15 +62,20 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
         var _a;
         return await ((_a = this.selectedPaymentMethodOptionRef) === null || _a === void 0 ? void 0 : _a.resolvePaymentMethod(insuranceValidation));
     }
+    async validate() {
+        const newPaymentMethodElement = this.selectedPaymentMethodOptionRef;
+        const isValid = await newPaymentMethodElement.validate();
+        return { isValid: isValid };
+    }
     render() {
         var _a;
-        return (h(Host, { key: '2d3dc8bc98cea3efbcf342a31b6883f30099b031' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (h(Host, { key: '2cf31e17412eb30afabe6749b86b7d1a6f308114' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
             const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
             const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
             const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
             const sezzle = paymentMethodOption.id === PaymentMethodTypes.sezzle;
             if (newCard || newBankAccount) {
-                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, iframeOrigin: this.iframeOrigin, ref: (el) => {
+                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, "show-card": this.showCard, "show-ach": this.showAch, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, iframeOrigin: this.iframeOrigin, ref: (el) => {
                         if (isSelected) {
                             this.selectedPaymentMethodOptionRef = el;
                         }
@@ -120,14 +110,16 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
         "insuranceToggled": [4, "insurance-toggled"],
         "authToken": [1, "auth-token"],
         "accountId": [1, "account-id"],
-        "savedPaymentMethods": [16],
+        "savedPaymentMethods": [16, "saved-payment-methods"],
         "paymentAmount": [2, "payment-amount"],
         "hideCardBillingForm": [4, "hide-card-billing-form"],
+        "hideBankAccountBillingForm": [4, "hide-bank-account-billing-form"],
         "iframeOrigin": [1, "iframe-origin"],
         "selectedPaymentMethodId": [32],
         "paymentMethodOptions": [32],
         "fillBillingForm": [64],
-        "resolvePaymentMethod": [64]
+        "resolvePaymentMethod": [64],
+        "validate": [64]
     }, [[0, "paymentMethodOptionSelected", "paymentMethodOptionSelected"]], {
         "savedPaymentMethods": ["paymentMethodsChanged"]
     }]);
@@ -135,7 +127,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payment-method-options", "bank-account-form", "billing-form", "card-form", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-billing-form-wrapper", "justifi-new-payment-method", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method", "postal-form"];
+    const components = ["justifi-payment-method-options", "bank-account-form", "card-form", "custom-popper", "form-control-checkbox", "form-control-help-text", "form-control-radio", "form-control-select", "form-control-text", "form-control-tooltip", "hidden-input", "iframe-input", "justifi-billing-form", "justifi-new-payment-method", "justifi-save-new-payment-method", "justifi-saved-payment-method", "justifi-sezzle-payment-method"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payment-method-options":
             if (!customElements.get(tagName)) {
@@ -143,91 +135,81 @@ function defineCustomElement() {
             }
             break;
         case "bank-account-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$i();
-            }
-            break;
-        case "billing-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$h();
-            }
-            break;
-        case "card-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }
             break;
-        case "custom-popper":
+        case "card-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$f();
             }
             break;
-        case "form-control-checkbox":
+        case "custom-popper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }
             break;
-        case "form-control-help-text":
+        case "form-control-checkbox":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "form-control-radio":
+        case "form-control-help-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "form-control-select":
+        case "form-control-radio":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "form-control-text":
+        case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "form-control-tooltip":
+        case "form-control-text":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "hidden-input":
+        case "form-control-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "iframe-input":
+        case "hidden-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "justifi-billing-form-wrapper":
+        case "iframe-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "justifi-new-payment-method":
+        case "justifi-billing-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "justifi-save-new-payment-method":
+        case "justifi-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "justifi-saved-payment-method":
+        case "justifi-save-new-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "justifi-sezzle-payment-method":
+        case "justifi-saved-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "postal-form":
+        case "justifi-sezzle-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/module/payment-provisioning-actions.js

@@ -1,5 +1,5 @@
-import { a as ComponentErrorSeverity } from './ComponentError.js';
-import { g as getErrorMessage, a as getErrorCode } from './utils4.js';
+import { C as ComponentErrorSeverity } from './ComponentError.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 
 // Business / Entity API Actions
 const makeGetBusiness = ({ authToken, businessId, service }) => async ({ onSuccess, onError, final = () => { } }) => {

package/dist/module/payment-provisioning-core.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
-import { a as checkProvisioningStatus } from './helpers.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError.js';
+import { c as checkProvisioningStatus } from './helpers.js';
 import { t as text } from './parts.js';
 import { S as StyledHost } from './styled-host.js';
 import { H as Header1 } from './header-1.js';
@@ -46,6 +46,10 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
         this.clickEvent = createEvent(this, "click-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.submitEvent = createEvent(this, "submit-event", 7);
+        this.loading = false;
+        this.businessProvisioned = false;
+        this.currentStep = 0;
+        this.allowOptionalFields = false;
         this.setBusinessProvisioned = () => {
             this.getBusiness({
                 onSuccess: (response) => {
@@ -99,16 +103,6 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
             const currentStep = this.refs[this.currentStep];
             currentStep.validateAndSubmit({ onSuccess: this.incrementSteps });
         };
-        this.loading = false;
-        this.businessProvisioned = false;
-        this.currentStep = 0;
-        this.errorMessage = undefined;
-        this.businessId = undefined;
-        this.authToken = undefined;
-        this.allowOptionalFields = false;
-        this.formTitle = undefined;
-        this.getBusiness = undefined;
-        this.postProvisioning = undefined;
     }
     handleFormCompleted() {
         this.postProvisioningData();
@@ -140,8 +134,8 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
         "authToken": [1, "auth-token"],
         "allowOptionalFields": [4, "allow-optional-fields"],
         "formTitle": [1, "form-title"],
-        "getBusiness": [16],
-        "postProvisioning": [16],
+        "getBusiness": [16, "get-business"],
+        "postProvisioning": [16, "post-provisioning"],
         "loading": [32],
         "businessProvisioned": [32],
         "currentStep": [32],

package/dist/module/payment-provisioning-form-buttons.js

@@ -8,12 +8,6 @@ const PaymentProvisioningFormButtons = /*@__PURE__*/ proxyCustomElement(class Pa
     constructor() {
         super();
         this.__registerHost();
-        this.currentStep = undefined;
-        this.totalSteps = undefined;
-        this.formLoading = undefined;
-        this.formDisabled = undefined;
-        this.previousStepButtonOnClick = undefined;
-        this.nextStepButtonOnClick = undefined;
     }
     get showPreviousStepButton() {
         return this.currentStep > 0;
@@ -32,8 +26,8 @@ const PaymentProvisioningFormButtons = /*@__PURE__*/ proxyCustomElement(class Pa
         "totalSteps": [2, "total-steps"],
         "formLoading": [4, "form-loading"],
         "formDisabled": [4, "form-disabled"],
-        "previousStepButtonOnClick": [16],
-        "nextStepButtonOnClick": [16]
+        "previousStepButtonOnClick": [16, "previous-step-button-on-click"],
+        "nextStepButtonOnClick": [16, "next-step-button-on-click"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/module/payment-provisioning-form-steps.js

@@ -34,6 +34,7 @@ const PaymentProvisioningFormSteps = /*@__PURE__*/ proxyCustomElement(class Paym
     constructor() {
         super();
         this.__registerHost();
+        this.allowOptionalFields = false;
         this.componentStepMapping = {
             0: () => h("justifi-business-core-info-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[0] = el, allowOptionalFields: this.allowOptionalFields }),
             1: () => h("justifi-legal-address-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[1] = el, allowOptionalFields: this.allowOptionalFields }),
@@ -43,12 +44,6 @@ const PaymentProvisioningFormSteps = /*@__PURE__*/ proxyCustomElement(class Paym
             5: () => h("justifi-business-bank-account-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[5] = el, allowOptionalFields: this.allowOptionalFields }),
             6: () => h("justifi-business-terms-conditions-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[6] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields }),
         };
-        this.businessId = undefined;
-        this.authToken = undefined;
-        this.refs = undefined;
-        this.currentStep = undefined;
-        this.allowOptionalFields = false;
-        this.handleFormLoading = undefined;
     }
     get currentStepComponent() {
         return this.componentStepMapping[this.currentStep]();
@@ -62,7 +57,7 @@ const PaymentProvisioningFormSteps = /*@__PURE__*/ proxyCustomElement(class Paym
         "refs": [16],
         "currentStep": [2, "current-step"],
         "allowOptionalFields": [4, "allow-optional-fields"],
-        "handleFormLoading": [16]
+        "handleFormLoading": [16, "handle-form-loading"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/module/payment.service.js

@@ -3,18 +3,18 @@ import './ComponentError.js';
 import './Checkout.js';
 import './Pagination.js';
 import './Payment.js';
-import './SubAccount.js';
+import './Refund.js';
 import './Document.js';
 
 class PaymentService {
     async fetchPayments(accountId, authToken, params, apiOrigin = "https://wc-proxy.justifi.ai") {
         const api = Api({ authToken, apiOrigin: apiOrigin });
         const endpoint = `account/${accountId}/payments`;
-        return api.get(endpoint, params);
+        return api.get({ endpoint, params });
     }
-    async fetchPayment(paymentId, authToken) {
+    async fetchPayment(paymentId, authToken, apiOrigin = "https://wc-proxy.justifi.ai") {
         const endpoint = `payments/${paymentId}`;
-        return Api({ authToken, apiOrigin: "https://wc-proxy.justifi.ai" }).get(endpoint);
+        return Api({ authToken, apiOrigin }).get({ endpoint });
     }
 }
 

package/dist/module/payments-list-core2.js

@@ -1,15 +1,15 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import { h as convertToLocal } from './utils2.js';
 import './ComponentError.js';
 import './Checkout.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
-import './SubAccount.js';
+import './Refund.js';
 import './Document.js';
-import { o as tableHeadCell, q as getAlternateTableCellPart, n as table, p as tableCell } from './parts.js';
-import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types2.js';
+import { n as tableHeadCell, a2 as getAlternateTableCellPart, m as table, o as tableCell } from './parts.js';
+import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types3.js';
 import './details.js';
 import { M as MapPaymentStatusToBadge } from './payments-status.js';
-import { j as convertToLocal } from './utils2.js';
 import { o as onQueryParamsChange, g as getRequestParams } from './payments-list-params-state.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
@@ -41,6 +41,10 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
         this.__registerHost();
         this.clickEvent = createEvent(this, "click-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
+        this.payments = [];
+        this.loading = true;
+        this.paging = pagingDefaults;
+        this.pagingParams = {};
         this.handleClickPrevious = (beforeCursor) => {
             this.pagingParams = { before_cursor: beforeCursor };
             this.clickEvent.emit({ name: TableClickActions.previous });
@@ -56,14 +60,6 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
             const paymentData = this.payments.find((payment) => payment.id === clickedPaymentID);
             this.clickEvent.emit({ name: TableClickActions.row, data: paymentData });
         };
-        this.getPayments = undefined;
-        this.columns = undefined;
-        this.payments = [];
-        this.paymentsTable = undefined;
-        this.loading = true;
-        this.errorMessage = undefined;
-        this.paging = pagingDefaults;
-        this.pagingParams = {};
     }
     updateOnPropChange() {
         this.fetchData();
@@ -121,7 +117,7 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: '7650bc8c64b4b727048b748bb899b534159c2ecd' }, h("div", { key: 'ebf919d213a280adea8852c33c53314db3d73279', class: "table-wrapper" }, h("table", { key: '618a5113b68901bef3df0aed342e8cc6e76f672d', class: "table table-hover", part: table }, h("thead", { key: '4978a6a0572f228ce0b67aed63c0123f3c13251a', class: "table-head sticky-top" }, h("tr", { key: '875633307c439d239ed9ff6c9eae5f414729b4fc', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: '030a7ab7d92337fa4ee74d206e4a48c79f6eae4d', class: "table-body" }, h(TableLoadingState, { key: '6b3a71f087ac93c2b6487043d1624518b01d7370', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '51a90cd22acfdf55b0c351e6b7f2b1b7e1f156d0', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '47367183f197a6eafe761ac478a435bba5f9f6d6', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '2ca665dbc33b954145cedba2d75e98a3d45ff85f', class: "sticky-bottom" }, h("tr", { key: 'a7ecd6b390fdb960c589e2c463d354afe7b29100', class: "table-light align-middle" }, h("td", { key: '74f32baddb41ff3ca04b2199b1a5d75189fb406e', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '123f359c4a1948ee0189e49b163520d5858936ec', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: 'f86d52669c90effcd3d9d53f6de3d968c7e0e5b8' }, h("div", { key: 'c550036e844e432b64d28fd7fe126bbb4201e30d', class: "table-wrapper" }, h("table", { key: '17789379d288ad3fad03fb74b2a230563f891ebe', class: "table table-hover", part: table }, h("thead", { key: '8dbc48e378bb5f0d2bced430709156c944502dbf', class: "table-head sticky-top" }, h("tr", { key: '1d1d84f81bfe1a8f8cb7eafd9faedaed8cef5895', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: '0700177245ac7d6a6d631410957a71f259922dad', class: "table-body" }, h(TableLoadingState, { key: '055582e228ec1f955bb5a136f17801711f9fc4eb', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '061f7fed30e4c5337dc0608bf5674c5d25918348', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '9c011ecc196eb30da5b78c8b365d96af2b041a5b', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '2518be1d8d308549a1c531ff87760b279fdaeea1', class: "sticky-bottom" }, h("tr", { key: '81b14b10f51177f45b71aa5bdb39109e2b02214f', class: "table-light align-middle" }, h("td", { key: '9e61c80405503b5e1e78eb946e099d57fe9685c7', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'ce881fdc8fc0b5a1ce50eea97f9adc8237f9a880', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],
@@ -129,7 +125,7 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
         "columns": ["updateOnPropChange"]
     }; }
 }, [0, "payments-list-core", {
-        "getPayments": [16],
+        "getPayments": [16, "get-payments"],
         "columns": [1],
         "payments": [32],
         "paymentsTable": [32],

package/dist/module/payout-details-core2.js

@@ -1,5 +1,5 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { b as formatDate, d as formatTime } from './utils2.js';
+import { b as formatDate, e as formatTime } from './utils2.js';
 import { E as ErrorState, b as EntityHeadInfo, c as EntityHeadInfoItem, D as DetailSectionTitle, a as DetailItem, C as CodeBlock } from './utils.js';
 import { B as Button } from './button.js';
 import { S as StyledHost } from './styled-host.js';
@@ -26,6 +26,8 @@ const PayoutDetailsCore = /*@__PURE__*/ proxyCustomElement(class PayoutDetailsCo
         super();
         this.__registerHost();
         this.errorEvent = createEvent(this, "error-event", 7);
+        this.loading = true;
+        this.errorMessage = null;
         this.downloadCSV = () => {
             this.getPayoutCSV({
                 payoutId: this.payout.id,
@@ -39,11 +41,6 @@ const PayoutDetailsCore = /*@__PURE__*/ proxyCustomElement(class PayoutDetailsCo
                 },
             });
         };
-        this.getPayout = undefined;
-        this.getPayoutCSV = undefined;
-        this.payout = undefined;
-        this.loading = true;
-        this.errorMessage = null;
     }
     componentWillLoad() {
         if (this.getPayout) {
@@ -74,14 +71,14 @@ const PayoutDetailsCore = /*@__PURE__*/ proxyCustomElement(class PayoutDetailsCo
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '061c711344ca86e94a8fcc9d3d5f7de97e5c2179' }, this.loading && h(PayoutDetailsLoading, { key: '697e0405c5287731c6b5349f89919e6ca167a7b8' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'baf48186beef6db33ca09cc62f48e1d6233cc087', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '2ad1ac98d7b7613c017ce94d5f970c599e385857', slot: "head-info", badge: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: '356ae84a31ba8d28d4b00c5a019c9f6f169c16bb', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '9bc19f40ab8c1c75acf8771d2e939c9b86c81352', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'adda5e8e83511030ab0998b9093d3f73879b1b34', title: "ID", value: this.payout.id }), h("div", { key: 'a8e3eb9c2ac80d09078adb19107106d2952c4995', class: "m-4" }, h(Button, { key: '039196e6cb3d5600eb60343eb073739b262adb89', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '7076fed938660f113e41d0f1cf29410df02bd9d5', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'bd3fbd6c010d62a3db20b05eb09b6e1144675978', sectionTitle: "Details" }), h("div", { key: '6f5faf48a2fa1a49265e8c7454889ad007efea77', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '7f426b472de86bc4948bb4722f5f59190a8816fc', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '9c985e1faaac021bb49c15064edb7cdacb53b285', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '819e4ce2b8a2aa34eee35994bd395cfbd358a08b', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'de6ef451dba0364a2d531b82ed5a8a3cfc865fce', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: 'ab3705265c4d05f3e157e5beb338239e99be687d', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'ceef5bbeeb73858eea8643a50107288e87280c15', sectionTitle: "Account" }), h("div", { key: '6652445ecf1819d85b8642af02ded44cde934979', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '53b1e17717881ee14bbac8ff5941d8ee850675c2', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'afc5c48aef9715ef55f1aaa207f0af427679f8a4', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'd78fe12043891c7a76b9c1d590cff1cfb45bf1f3', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '5c8d4c492a4f0ccb2d1b7c721be7426e6b46e143', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '9ecc3872af10c9cfc380b1f4382a1ac980fff0fd', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'd38fdfd6754a68ff340a3e6456418c2ee0cd0672', sectionTitle: 'Metadata' }), h("div", { key: 'e45b2a4681556d276eaeed35e5c8a3b90e3235f0', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '1c2b19619b1997ee8f12116d1ffe822fd5ce09ce', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: '5b8398747913d6bf40b373eca65c253e8113a21d' }, this.loading && h(PayoutDetailsLoading, { key: 'e5f9584c81a01d4a10b1afd7926fae1e92f39ad8' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'c3ef47e4bd529fd0738f30780e53ecd5778106b9', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '8c0a7c9319715c66820b7fe4c4c4d231fff912aa', slot: "head-info", badge: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'f5cee7860b1d1653cb81d790e93010a407c54dcc', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '5b1ddcba3cec58cda32dd1e3e77f655c92c0b3bd', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '0413f7ef138657ed896f32bd79dc685efbabd348', title: "ID", value: this.payout.id }), h("div", { key: '18347805fab3468f464cb05886f70808d3fa8d49', class: "m-4" }, h(Button, { key: 'c3e28ed761ad89697efe2d8e311b07cafe5f4e87', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '46e2455e8aab52ff6f2ec21ab1bc5d9314e4fd9d', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '11dd28f1a0a0128481683f8c7bf703a63a37b92f', sectionTitle: "Details" }), h("div", { key: '015e5ff4c1723d5cd0e9658c9489a961b20b6bbc', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '0bb7d2722f3c2abbe9d09e8ed5e401f3dc126e1a', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'afb65e77f66f7600d8498ef2b26e13b34c8815d2', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '289d1c6b93cf7e36efc3f473f32beab31bf2897a', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '866381078c7fa406bbf5293c517f6d87d736e3c2', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '9cc27410ff9600465f4b52db6e8b70d291e48889', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: 'a270a06d0a9407c65a71dfe0525a547ffc7a7b76', sectionTitle: "Account" }), h("div", { key: '17b064d47baaff7d58c9b73b15b225456cbb0139', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '2f7335af4b7708901760a780a9908694ad488442', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'e3dc1e150db520f373b0e8d7faf383ea9859ba58', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'e4d213592faccb7142c781ae5da2478b2efc6a28', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '0a2beb62f2c4fa2ceff53c853706343cb8994624', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'f3e6c8f8fd7789f7d9244eecc0cf328ae5519f87', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'a35dc97c55c9fc81679a5396d79c7d0f8834dc8a', sectionTitle: 'Metadata' }), h("div", { key: '8deeab8c305bb861fa7a9a3bc1ff5aad8e8d0d48', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '318c943916f17908ead2addaebe350e949b305f0', metadata: this.payout.metadata })))))));
     }
     static get watchers() { return {
         "getPayout": ["getPayoutWatcher"]
     }; }
 }, [0, "payout-details-core", {
-        "getPayout": [16],
-        "getPayoutCSV": [16],
+        "getPayout": [16, "get-payout"],
+        "getPayoutCSV": [16, "get-payout-c-s-v"],
         "payout": [32],
         "loading": [32],
         "errorMessage": [32]

package/dist/module/payouts-list-core2.js

@@ -1,14 +1,14 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
+import { h as convertToLocal } from './utils2.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError.js';
 import './Checkout.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
-import './SubAccount.js';
+import './Refund.js';
 import './Document.js';
-import { q as getAlternateTableCellPart, o as tableHeadCell, n as table, p as tableCell } from './parts.js';
-import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types2.js';
+import { n as tableHeadCell, a2 as getAlternateTableCellPart, m as table, o as tableCell } from './parts.js';
+import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types3.js';
 import './details.js';
-import { j as convertToLocal } from './utils2.js';
 import { M as MapPayoutStatusToBadge } from './payouts-status.js';
 import { o as onQueryParamsChange, g as getRequestParams } from './payouts-list-params-state.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
@@ -45,6 +45,11 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
         this.__registerHost();
         this.clickEvent = createEvent(this, "click-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
+        this.payouts = [];
+        this.subAccounts = [];
+        this.loading = true;
+        this.paging = pagingDefaults;
+        this.pagingParams = {};
         this.downloadCSV = (payoutId) => {
             this.getPayoutCSV({
                 payoutId,
@@ -76,17 +81,6 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
             const payoutData = this.payouts.find((payout) => payout.id === clickedPayoutID);
             this.clickEvent.emit({ name: TableClickActions.row, data: payoutData });
         };
-        this.getPayouts = undefined;
-        this.getSubAccounts = undefined;
-        this.getPayoutCSV = undefined;
-        this.columns = undefined;
-        this.payouts = [];
-        this.payoutsTable = undefined;
-        this.subAccounts = [];
-        this.loading = true;
-        this.errorMessage = undefined;
-        this.paging = pagingDefaults;
-        this.pagingParams = {};
     }
     updateOnPropChange() {
         this.fetchData();
@@ -178,7 +172,7 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'ff5859c3d61ab7b2d532541c383c2478b9efc391' }, h("div", { key: 'cb50816020bfd324fae4f5f0d1a151ab04600b64', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: '69cf5b76a95dd9396b97c6dd54aab8c067522102', class: "table table-hover", part: table }, h("thead", { key: '086161ba08d930efaf431571fa7670ad74a1ec88', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '659d524600aec47afa5dc75cce808da945408536', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: 'bf665357df28983b110565b8556f1cf1a022f164', class: "table-body" }, h(TableLoadingState, { key: 'c789d5b153a377ca1d2e0244e4480fe118ffa2d2', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '80ab61d7e68e50ad88ad5a7f8e11464418006a59', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '195c41c6e0a91d09ca0440002e2883fe49626c07', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'd9094830c7572cfbbfe0a17d55d9ad0daffd319f', class: "sticky-bottom" }, h("tr", { key: '658d6a380abc8085f5ec26b1423e0b9487b962d6', class: "table-light align-middle" }, h("td", { key: '962ddd1a6873a7206126e145d6772bacd4197cbf', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '28c37545fe9fdce46302a9cc6d370d95e7d03d7b', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: '68e0b1581a72a78c12fa0e6239d62920d3b5d9a2' }, h("div", { key: 'f59a292ac975c941520a841fa51c5610c8e60f54', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: 'be74e83accf6a9de9c6505f0136bfdf68bd64586', class: "table table-hover", part: table }, h("thead", { key: '3e59e5053c2be342c3ba6bc1d28695cf302dadbf', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '1c714c3f40fdcf4e45c37ce2098cd90eb93c9121', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: '4fcbaed0667f3eaac4b7bfc628a2374f8978352e', class: "table-body" }, h(TableLoadingState, { key: '0dcf9c3bfbb228d93b9bac815704453b42aae923', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'd0bd0eaf65faf8d1ce9b2634885fb0be0456459d', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'ff4621c3efa8bb45214a8e571babe17bae0d05d3', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'eaf66860e8d302af6bb5e09ea843ce2a2938e06b', class: "sticky-bottom" }, h("tr", { key: '8b6f094a8ac40924a32f613cff0bbcc6b0e19def', class: "table-light align-middle" }, h("td", { key: '6d90ebe89ec368d70fed97dc19b8d20382f5b862', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '836998c60c8e029131b0e83d45b9ce9fb4c36d8c', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],
@@ -186,9 +180,9 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
         "getSubAccounts": ["updateOnPropChange"]
     }; }
 }, [0, "payouts-list-core", {
-        "getPayouts": [16],
-        "getSubAccounts": [16],
-        "getPayoutCSV": [16],
+        "getPayouts": [16, "get-payouts"],
+        "getSubAccounts": [16, "get-sub-accounts"],
+        "getPayoutCSV": [16, "get-payout-c-s-v"],
         "columns": [1],
         "payouts": [32],
         "payoutsTable": [32],

package/dist/module/product-or-service.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as create$3, a as create$6, F as FormController } from './form.js';
 import { D as DisputeResponseFormStep, f as fileInputHandler } from './file-input-handler.js';
-import { T as heading5 } from './parts.js';
+import { W as heading5 } from './parts.js';
 import { d as defineCustomElement$5 } from './custom-popper2.js';
 import { d as defineCustomElement$4 } from './form-control-date2.js';
 import { d as defineCustomElement$3 } from './form-control-file-v22.js';
@@ -17,14 +17,12 @@ const ProductOrService = /*@__PURE__*/ proxyCustomElement(class ProductOrService
     constructor() {
         super();
         this.__registerHost();
-        this.inputHandler = (name, value) => {
-            this.form.setValues(Object.assign(Object.assign({}, this.form.values.getValue()), { [name]: value }));
-        };
-        this.disputeResponse = undefined;
         this.documentErrors = {};
-        this.form = undefined;
         this.errors = {};
         this.documents = { service_documentation: [] };
+        this.inputHandler = (name, value) => {
+            this.form.setValues(Object.assign(Object.assign({}, this.form.values.getValue()), { [name]: value }));
+        };
     }
     async validateAndSubmit(onSuccess) {
         const documentList = Object.values(this.documents).flat();
@@ -41,7 +39,7 @@ const ProductOrService = /*@__PURE__*/ proxyCustomElement(class ProductOrService
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '8d3c718760c63f8ff57e02979bc16220a1fe1bef' }, h("div", { key: '9e01588d0a7ecdf25649e06eeb488eceec28f369', class: "row gy-3" }, h("div", { key: 'a596d8b3cb35c20b6131cafaf58ce4b7d8112f47', class: "col-12" }, h("h2", { key: 'f85ef842a4134424368eddd1fb937b603f24cd93', class: "h5", part: heading5 }, "Product & Service Details")), h("div", { key: '2248cf9d4604d9ad01257849662fbe003b06b008', class: "col-12" }, h("form-control-text", { key: '15a7ea5b0bc3544ca9cc261690a8fbc41d3acf14', label: "Product Description", name: "product_description", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.product_description, inputHandler: this.inputHandler, errorText: this.errors.product_description })), h("div", { key: '55dd1964d4674196a13a319620c9333410899ede', class: "col-12" }, h("form-control-date", { key: '528b504c7a73d0ff9e43d92c0cc2ca75bef3f700', label: "Service Date", name: "service_date", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.service_date, inputHandler: this.inputHandler, errorText: this.errors.service_date })), h("div", { key: '2551b98489d545825da7418957267128e5629419', class: "col-12" }, h("form-control-file-v2", { key: '93acee274f248630fba1d9a1b130bfa7404b075b', label: "Service Documentation", name: "service_documentation", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.service_documentation })))));
+        return (h("div", { key: '8a6a190848964c16b947093eadd0b0496c86a3f6' }, h("div", { key: 'df6c7de15d25c39b63bba017835c82743679770c', class: "row gy-3" }, h("div", { key: '928aa9285444f905ba3958de0a5a2663946e698f', class: "col-12" }, h("h2", { key: '10d1005631fa68fe52c7e1d6793c4d1a4e9eb0df', class: "h5", part: heading5 }, "Product & Service Details")), h("div", { key: '69ad4e4d6a9a3088f50c00f332dc9b2509560b73', class: "col-12" }, h("form-control-text", { key: '9678d4e8714d1076aed58a7aa81dc8aa0981c5d1', label: "Product Description", name: "product_description", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.product_description, inputHandler: this.inputHandler, errorText: this.errors.product_description })), h("div", { key: '245b69ba2746c869aed2bfa5088550de2bf528c0', class: "col-12" }, h("form-control-date", { key: '49ed65ee6c3f45d6cbbecb5547e93e451935c1c7', label: "Service Date", name: "service_date", defaultValue: (_b = this.disputeResponse) === null || _b === void 0 ? void 0 : _b.service_date, inputHandler: this.inputHandler, errorText: this.errors.service_date })), h("div", { key: '4fd14509e520248d6f7a98eadfb0d65294cad295', class: "col-12" }, h("form-control-file-v2", { key: 'e0b7c1d0a9d9df468bd816c48c649b7d041c523d', label: "Service Documentation", name: "service_documentation", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_c = this.documentErrors) === null || _c === void 0 ? void 0 : _c.service_documentation })))));
     }
 }, [0, "justifi-product-or-service", {
         "disputeResponse": [8, "dispute-response"],