@justifi/webcomponents 5.0.0-rc-2 → 5.1.0

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 './utils3.js';
+import { g as getErrorMessage, a as getErrorCode } from './utils4.js';
 
 // Entity API Actions
 const makeGetBusiness = ({ authToken, businessId, service }) => async ({ onSuccess, onError, final = () => { } }) => {
@@ -174,5 +174,35 @@ const makePostIdentity = ({ authToken, service }) => async ({ payload, onSuccess
         return final();
     }
 };
+// Bank Account API Actions
+const makePostBankAccount = ({ authToken, service }) => async ({ payload, onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.postBankAccount(authToken, payload);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
 
-export { makePatchBusiness as a, makeGetIdentity as b, makePatchIdentity as c, makePostIdentity as d, makePostProvisioning as e, makeGetBusiness as m };
+export { makePatchBusiness as a, makePostBankAccount as b, makeGetIdentity as c, makePatchIdentity as d, makePostIdentity as e, makePostProvisioning as f, makeGetBusiness as m };

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

@@ -6,18 +6,19 @@ import { S as StyledHost } from './styled-host.js';
 import { H as Header1 } from './header-1.js';
 import './details.js';
 import { a as BusinessFormClickActions } from './event-types2.js';
-import { d as defineCustomElement$w } from './custom-popper2.js';
-import { d as defineCustomElement$v } from './form-control-checkbox2.js';
-import { d as defineCustomElement$u } from './form-control-date2.js';
-import { d as defineCustomElement$t } from './form-control-file2.js';
-import { d as defineCustomElement$s } from './form-control-monetary2.js';
-import { d as defineCustomElement$r } from './form-control-number-masked2.js';
-import { d as defineCustomElement$q } from './form-control-select2.js';
-import { d as defineCustomElement$p } from './form-control-text2.js';
-import { d as defineCustomElement$o } from './form-control-tooltip2.js';
-import { d as defineCustomElement$n } from './business-additional-questions-form-step.js';
-import { d as defineCustomElement$m } from './business-additional-questions-form-step-core.js';
-import { d as defineCustomElement$l } from './business-bank-account-form-step.js';
+import { d as defineCustomElement$x } from './custom-popper2.js';
+import { d as defineCustomElement$w } from './form-control-checkbox2.js';
+import { d as defineCustomElement$v } from './form-control-date2.js';
+import { d as defineCustomElement$u } from './form-control-file2.js';
+import { d as defineCustomElement$t } from './form-control-monetary2.js';
+import { d as defineCustomElement$s } from './form-control-number-masked2.js';
+import { d as defineCustomElement$r } from './form-control-select2.js';
+import { d as defineCustomElement$q } from './form-control-text2.js';
+import { d as defineCustomElement$p } from './form-control-tooltip2.js';
+import { d as defineCustomElement$o } from './business-additional-questions-form-step.js';
+import { d as defineCustomElement$n } from './business-additional-questions-form-step-core.js';
+import { d as defineCustomElement$m } from './business-bank-account-form-step.js';
+import { d as defineCustomElement$l } from './business-bank-account-form-step-core.js';
 import { d as defineCustomElement$k } from './business-core-info-form-step.js';
 import { d as defineCustomElement$j } from './business-core-info-form-step-core.js';
 import { d as defineCustomElement$i } from './business-document-upload-form-step.js';
@@ -133,7 +134,7 @@ const PaymentProvisioningCore = /*@__PURE__*/ proxyCustomElement(class PaymentPr
         this.loading = event.detail;
     }
     render() {
-        return (h(StyledHost, { key: 'df7f6b5366335e0bd1082bb865c8a460a0b62704' }, h("div", { key: '694f4b13ef333959c6efa573d78f415379fbe4fd', class: 'row gap-3' }, h(Header1, { key: 'd69dafa307c75ed3583551d86f87b3ec29404218', text: this.formTitle }), h("justifi-payment-provisioning-form-steps", { key: 'd33e37ce3f2fdce1eb462d096be9baede1ccee9b', businessId: this.businessId, authToken: this.authToken, refs: this.refs, currentStep: this.currentStep, allowOptionalFields: this.allowOptionalFields, handleFormLoading: this.handleFormLoading }), h("div", { key: '8541f7a1c6a69820b73c976894109b5962f26067', class: 'd-flex justify-content-between align-items-center' }, h("div", { key: '1a8a0e9af596aa1d7eced5309e1fa2e399f33705', class: 'd-flex align-items-center', part: text }, this.stepCounter), h("justifi-payment-provisioning-form-buttons", { key: 'dd29d8b8d4da81f79c2375a5db99dfe796183d09', currentStep: this.currentStep, totalSteps: this.totalSteps, formLoading: this.loading, formDisabled: this.formDisabled, previousStepButtonOnClick: this.previousStepButtonOnClick, nextStepButtonOnClick: this.nextStepButtonOnClick })))));
+        return (h(StyledHost, { key: '03dc39eadbac2f9a9a4326bab1355bfc300c392e' }, h("div", { key: '86e6e57fc104c87696c5825119a15c0a642c4bd2', class: 'row gap-3' }, h(Header1, { key: 'd4df3ead1037464624fb8cc465427c6b90bd0e36', text: this.formTitle }), h("justifi-payment-provisioning-form-steps", { key: '7f3d977b8dfbb29c03125c173e9d41558de08322', businessId: this.businessId, authToken: this.authToken, refs: this.refs, currentStep: this.currentStep, allowOptionalFields: this.allowOptionalFields, handleFormLoading: this.handleFormLoading }), h("div", { key: '283568d94267850b0eb41fa6a52dbc6b0abf4642', class: 'd-flex justify-content-between align-items-center' }, h("div", { key: '6abf09f174e71767087b57180e976546c057499f', class: 'd-flex align-items-center', part: text }, this.stepCounter), h("justifi-payment-provisioning-form-buttons", { key: 'b38ed082d216556c6ae93bde3ec1324e69f8fcee', currentStep: this.currentStep, totalSteps: this.totalSteps, formLoading: this.loading, formDisabled: this.formDisabled, previousStepButtonOnClick: this.previousStepButtonOnClick, nextStepButtonOnClick: this.nextStepButtonOnClick })))));
     }
 }, [0, "justifi-payment-provisioning-core", {
         "businessId": [1, "business-id"],
@@ -151,7 +152,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payment-provisioning-core", "custom-popper", "form-control-checkbox", "form-control-date", "form-control-file", "form-control-monetary", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions-form-step", "justifi-additional-questions-form-step-core", "justifi-business-bank-account-form-step", "justifi-business-core-info-form-step", "justifi-business-core-info-form-step-core", "justifi-business-document-upload-form-step", "justifi-business-document-upload-input-group", "justifi-business-documents-on-file", "justifi-business-owners-form-step", "justifi-business-owners-form-step-core", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step", "justifi-business-representative-form-step-core", "justifi-business-terms-conditions-form-step", "justifi-business-terms-conditions-text", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-legal-address-form-step-core", "justifi-owner-form", "justifi-payment-provisioning-form-buttons", "justifi-payment-provisioning-form-steps", "owner-form-core", "owner-form-inputs"];
+    const components = ["justifi-payment-provisioning-core", "custom-popper", "form-control-checkbox", "form-control-date", "form-control-file", "form-control-monetary", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions-form-step", "justifi-additional-questions-form-step-core", "justifi-business-bank-account-form-step", "justifi-business-bank-account-form-step-core", "justifi-business-core-info-form-step", "justifi-business-core-info-form-step-core", "justifi-business-document-upload-form-step", "justifi-business-document-upload-input-group", "justifi-business-documents-on-file", "justifi-business-owners-form-step", "justifi-business-owners-form-step-core", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step", "justifi-business-representative-form-step-core", "justifi-business-terms-conditions-form-step", "justifi-business-terms-conditions-text", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-legal-address-form-step-core", "justifi-owner-form", "justifi-payment-provisioning-form-buttons", "justifi-payment-provisioning-form-steps", "owner-form-core", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payment-provisioning-core":
             if (!customElements.get(tagName)) {
@@ -160,60 +161,65 @@ function defineCustomElement() {
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$x();
             }
             break;
         case "form-control-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$w();
             }
             break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "form-control-file":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "form-control-monetary":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "form-control-number-masked":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "form-control-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "form-control-tooltip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "justifi-additional-questions-form-step":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "justifi-additional-questions-form-step-core":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "justifi-business-bank-account-form-step":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$m();
+            }
+            break;
+        case "justifi-business-bank-account-form-step-core":
             if (!customElements.get(tagName)) {
                 defineCustomElement$l();
             }

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

@@ -25,7 +25,7 @@ const PaymentProvisioningFormButtons = /*@__PURE__*/ proxyCustomElement(class Pa
         return this.currentStep === this.totalSteps;
     }
     render() {
-        return (h("div", { key: 'e1ab54d1e838fcf447bc27cb7a24360c683d6ad8', class: 'd-flex gap-2' }, h(Button, { key: '203ce170dcd2c39edbd238cdacbd5a778d6e3a39', variant: "secondary", type: "button", onClick: () => this.previousStepButtonOnClick(), disabled: this.formDisabled, hidden: !this.showPreviousStepButton }, "Previous"), h(Button, { key: '820000f2ffc9a3d037b12ca11b724169de0747b8', variant: "primary", type: "button", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showNextStepButton }, "Next"), h(Button, { key: '5da1da1e44963c1138b4ecf9619b43f7ff0caa06', variant: "primary", type: "submit", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showSubmitButton }, "Submit")));
+        return (h("div", { key: 'f5b14768cd97673e77c1ee2d9d73221cdee885e6', class: 'd-flex gap-2' }, h(Button, { key: '4726571002718d036c292a41dc216955ba5ec687', variant: "secondary", type: "button", onClick: () => this.previousStepButtonOnClick(), disabled: this.formDisabled, hidden: !this.showPreviousStepButton }, "Previous"), h(Button, { key: '3852cfcd4704f5509f22a5c457526fe8475df096', variant: "primary", type: "button", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showNextStepButton }, "Next"), h(Button, { key: 'd62830b61932581071a1a44d872760be0823215a', variant: "primary", type: "submit", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showSubmitButton }, "Submit")));
     }
 }, [0, "justifi-payment-provisioning-form-buttons", {
         "currentStep": [2, "current-step"],

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

@@ -1,16 +1,17 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$u } from './custom-popper2.js';
-import { d as defineCustomElement$t } from './form-control-checkbox2.js';
-import { d as defineCustomElement$s } from './form-control-date2.js';
-import { d as defineCustomElement$r } from './form-control-file2.js';
-import { d as defineCustomElement$q } from './form-control-monetary2.js';
-import { d as defineCustomElement$p } from './form-control-number-masked2.js';
-import { d as defineCustomElement$o } from './form-control-select2.js';
-import { d as defineCustomElement$n } from './form-control-text2.js';
-import { d as defineCustomElement$m } from './form-control-tooltip2.js';
-import { d as defineCustomElement$l } from './business-additional-questions-form-step.js';
-import { d as defineCustomElement$k } from './business-additional-questions-form-step-core.js';
-import { d as defineCustomElement$j } from './business-bank-account-form-step.js';
+import { d as defineCustomElement$v } from './custom-popper2.js';
+import { d as defineCustomElement$u } from './form-control-checkbox2.js';
+import { d as defineCustomElement$t } from './form-control-date2.js';
+import { d as defineCustomElement$s } from './form-control-file2.js';
+import { d as defineCustomElement$r } from './form-control-monetary2.js';
+import { d as defineCustomElement$q } from './form-control-number-masked2.js';
+import { d as defineCustomElement$p } from './form-control-select2.js';
+import { d as defineCustomElement$o } from './form-control-text2.js';
+import { d as defineCustomElement$n } from './form-control-tooltip2.js';
+import { d as defineCustomElement$m } from './business-additional-questions-form-step.js';
+import { d as defineCustomElement$l } from './business-additional-questions-form-step-core.js';
+import { d as defineCustomElement$k } from './business-bank-account-form-step.js';
+import { d as defineCustomElement$j } from './business-bank-account-form-step-core.js';
 import { d as defineCustomElement$i } from './business-core-info-form-step.js';
 import { d as defineCustomElement$h } from './business-core-info-form-step-core.js';
 import { d as defineCustomElement$g } from './business-document-upload-form-step.js';
@@ -40,7 +41,7 @@ const PaymentProvisioningFormSteps = /*@__PURE__*/ proxyCustomElement(class Paym
             2: () => h("justifi-additional-questions-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[2] = el, allowOptionalFields: this.allowOptionalFields }),
             3: () => h("justifi-business-representative-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[3] = el, allowOptionalFields: this.allowOptionalFields }),
             4: () => h("justifi-business-owners-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[4] = el, allowOptionalFields: this.allowOptionalFields }),
-            5: () => h("justifi-business-bank-account-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[5] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields }),
+            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-document-upload-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[6] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields }),
             7: () => h("justifi-business-terms-conditions-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[7] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields }),
         };
@@ -55,7 +56,7 @@ const PaymentProvisioningFormSteps = /*@__PURE__*/ proxyCustomElement(class Paym
         return this.componentStepMapping[this.currentStep]();
     }
     render() {
-        return (h("div", { key: '95db2f73894dc4adff2c17298f5f0791c8db463b', class: 'col-12 mb-4' }, this.currentStepComponent));
+        return (h("div", { key: '7c2dc774f9c84172ffe0dbe18d24d9c582711159', class: 'col-12 mb-4' }, this.currentStepComponent));
     }
 }, [0, "justifi-payment-provisioning-form-steps", {
         "businessId": [1, "business-id"],
@@ -69,7 +70,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payment-provisioning-form-steps", "custom-popper", "form-control-checkbox", "form-control-date", "form-control-file", "form-control-monetary", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions-form-step", "justifi-additional-questions-form-step-core", "justifi-business-bank-account-form-step", "justifi-business-core-info-form-step", "justifi-business-core-info-form-step-core", "justifi-business-document-upload-form-step", "justifi-business-document-upload-input-group", "justifi-business-documents-on-file", "justifi-business-owners-form-step", "justifi-business-owners-form-step-core", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step", "justifi-business-representative-form-step-core", "justifi-business-terms-conditions-form-step", "justifi-business-terms-conditions-text", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-legal-address-form-step-core", "justifi-owner-form", "owner-form-core", "owner-form-inputs"];
+    const components = ["justifi-payment-provisioning-form-steps", "custom-popper", "form-control-checkbox", "form-control-date", "form-control-file", "form-control-monetary", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-additional-questions-form-step", "justifi-additional-questions-form-step-core", "justifi-business-bank-account-form-step", "justifi-business-bank-account-form-step-core", "justifi-business-core-info-form-step", "justifi-business-core-info-form-step-core", "justifi-business-document-upload-form-step", "justifi-business-document-upload-input-group", "justifi-business-documents-on-file", "justifi-business-owners-form-step", "justifi-business-owners-form-step-core", "justifi-business-representative-form-inputs", "justifi-business-representative-form-step", "justifi-business-representative-form-step-core", "justifi-business-terms-conditions-form-step", "justifi-business-terms-conditions-text", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-legal-address-form-step-core", "justifi-owner-form", "owner-form-core", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payment-provisioning-form-steps":
             if (!customElements.get(tagName)) {
@@ -78,60 +79,65 @@ function defineCustomElement() {
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "form-control-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "form-control-file":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "form-control-monetary":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "form-control-number-masked":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "form-control-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "form-control-tooltip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "justifi-additional-questions-form-step":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "justifi-additional-questions-form-step-core":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "justifi-business-bank-account-form-step":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "justifi-business-bank-account-form-step-core":
             if (!customElements.get(tagName)) {
                 defineCustomElement$j();
             }

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

@@ -0,0 +1,25 @@
+import { h } from '@stencil/core/internal/client';
+import { S as Skeleton } from './skeleton.js';
+import './details.js';
+
+const FormBlock = () => (h("div", { class: "row gap-3" },
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "25%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "100%" })),
+    h("div", { class: "col-12 d-flex gap-3" },
+        h(Skeleton, { width: "50%" }),
+        h(Skeleton, { width: "50%" })),
+    h("div", { class: "col-12 d-flex gap-3" },
+        h(Skeleton, { width: "65%" }),
+        h(Skeleton, { width: "35%" }))));
+const PaymentProvisioningLoading = () => {
+    return (h("div", { class: "row gap-5" },
+        h("div", { class: "col-12" },
+            h(Skeleton, { width: "40%", height: "40px" })),
+        h(FormBlock, null),
+        h(FormBlock, null),
+        h(FormBlock, null)));
+};
+
+export { PaymentProvisioningLoading as P };

package/dist/module/payment.service.js

@@ -1,9 +1,8 @@
-import { A as Api } from './Api.js';
+import { A as Api, c as config } from './config.js';
 import './Checkout.js';
 import './Pagination.js';
 import './Payment.js';
 import './SubAccount.js';
-import { c as config } from './config.js';
 
 class PaymentService {
     async fetchPayments(accountId, authToken, params, apiOrigin) {

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

@@ -3,11 +3,11 @@ import './Checkout.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
 import './SubAccount.js';
-import { f as tableHeadCell, g as getAlternateTableCellPart, j as table, k as tableCell } from './parts.js';
+import { m as tableHeadCell, n as getAlternateTableCellPart, o 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-types.js';
 import './details.js';
 import { M as MapPaymentStatusToBadge } from './payments-status.js';
-import { j as convertToLocal, c as formatCurrency } from './utils2.js';
+import { j as convertToLocal } from './utils2.js';
 import { o as onQueryParamsChange, q as queryParams } from './payments-list-params-state.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
@@ -22,15 +22,15 @@ const paymentTableColumns = {
     last_four_digits: () => (h("th", { part: tableHeadCell, scope: "col", title: "The brand and last 4 digits of the payment method" }, "Payment Method")),
 };
 const paymentTableCells = {
-    created_at: (value, index) => (h("td", { part: getAlternateTableCellPart(index) },
-        h("div", { class: "fw-bold" }, convertToLocal(value, { showDisplayDate: true })),
-        h("div", { class: "fw-bold" }, convertToLocal(value, { showTime: true })))),
-    amount: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value, true, true))),
-    status: (value, index) => (h("td", { part: getAlternateTableCellPart(index), innerHTML: MapPaymentStatusToBadge(value) })),
-    payment_type: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    description: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    payers_name: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    last_four_digits: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value))
+    created_at: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) },
+        h("div", { class: "fw-bold" }, convertToLocal(payment.created_at, { showDisplayDate: true })),
+        h("div", { class: "fw-bold" }, convertToLocal(payment.created_at, { showTime: true })))),
+    amount: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.formattedPaymentAmount(payment.amount))),
+    status: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, MapPaymentStatusToBadge(payment.status))),
+    payment_type: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.payment_type)),
+    description: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.description)),
+    payers_name: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.payers_name)),
+    last_four_digits: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.last_four_digits)),
 };
 
 const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore extends HTMLElement {
@@ -117,7 +117,7 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
         return combinedParams;
     }
     render() {
-        return (h("div", { key: '6d3aeab1a53d5a9f73ed770de5d936e290189a9e' }, h("div", { key: 'f9750011da7c0bf0e4bc5eb91fc5c54489798890', class: "table-wrapper" }, h("table", { key: '7361cc478802a1de5513bf92ea9ec7f105168d55', class: "table table-hover", part: table }, h("thead", { key: '239402e85ae6537f4fc605b06f9f747233aef37a', class: "table-head sticky-top" }, h("tr", { key: 'f3330dae27878b313848a057d1094e094bdd66f4', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: '1441e8920b68c7cf759188694b1cbc65a2c37795', class: "table-body" }, h(TableLoadingState, { key: '55bf8e8b8c6c859ce363ce30fb6db75f328ebca1', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '20d7f82636bc4b1a54a56ca89f2444261e26c0d6', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '10c160fafc746dece6e3837aa43021e48d7f49b9', 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: '058476cc6c3369cf4700203c28f3d2c9c002656b', class: "sticky-bottom" }, h("tr", { key: '87c051940f9e49e64d661d12f5387ef5263091b4', class: "table-light align-middle" }, h("td", { key: '06fe26d1f9d57c6598fe71ebb9b48780a35fba5a', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'd23dedce32252f08d0a24eb4a474e9ee62ebd0e1', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: '6ae0c491d9ba248e878f65915448b715ae1c3381' }, h("div", { key: '3e2a5fe63f83d7a45c44486bc7dc7e2493b29520', class: "table-wrapper" }, h("table", { key: '3523e917bd342db707671ce9069a17618b20d1f8', class: "table table-hover", part: table }, h("thead", { key: 'e3436965637929742b7b827627504f8b4776cd7c', class: "table-head sticky-top" }, h("tr", { key: 'edf671796c2a0ad5b1fc9d6e3c3c0210f841946d', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: '1cc99781f6a96dd3597fa32c31e2dff6861cc945', class: "table-body" }, h(TableLoadingState, { key: '0b1e2a89902ca170252139807512d2d91f2260f0', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '1857d904b79a0a5b9276846a6b0afd5fe54b72f0', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'da42e70686ca49cef71bce6fd596bd18f1f1f365', 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: 'e6dd57881b2643442d61c01a5308529ba1e24dc0', class: "sticky-bottom" }, h("tr", { key: '6dfb87ce0ba57057505e961825bb54bbe5d29910', class: "table-light align-middle" }, h("td", { key: 'a47bd709a0296308c7348cda14bf1d2958f10feb', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '0db007e310d5ca49bd05b5dbc7673cc2276b9ce3', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
         "queryParams": ["updateOnPropChange"],

package/dist/module/payments-status.js

@@ -1,24 +1,56 @@
+import { h } from '@stencil/core/internal/client';
+import { B as Badge, a as BadgeVariant } from './badge.js';
+
 const MapPaymentStatusToBadge = (status) => {
-    switch (status) {
-        case 'succeeded':
-            return "<span class='badge bg-success' title='This payment was successfully captured'>Succeeded</span>";
-        case 'authorized':
-            return "<span class='badge bg-primary' title='This card payment was authorized, but not captured. It could still succeed or fail.'>Authorized</span>";
-        case 'pending':
-            return "<span class='badge bg-primary' title='This ACH payment was processed, but the funds have not settled. It could still succeed or fail.'>Pending</span>";
-        case 'achFailed':
-            return "<span class='badge bg-danger' title='The funds couldn't be collected for this ACH payment (in addition to the original payment, an ACH return and fee will appear in a payout)'>Failed</span>";
-        case 'failed':
-            return "<span class='badge bg-danger' title='This card payment did not go through (it will not appear in a payout)'>Failed</span>";
-        case 'canceled':
-            return "<span class='badge bg-danger' title='This payment was canceled'>Canceled</span>";
-        case 'disputed':
-            return "<span class='badge bg-secondary' title='The account holder disputed this payment. The amount has been returned and a fee assessed.'>Disputed</span>";
-        case 'fully_refunded':
-            return "<span class='badge bg-secondary' title='The full amount of this payment has been refunded'>Fully Refunded</span>";
-        case 'partially_refunded':
-            return "<span class='badge bg-secondary' title='A portion of this payment has been refunded'>Partially Refunded</span>";
-    }
+    const statusToBadgeProps = {
+        succeeded: {
+            variant: BadgeVariant.SUCCESS,
+            title: 'This payment was successfully captured',
+            text: 'Succeeded',
+        },
+        authorized: {
+            variant: BadgeVariant.PRIMARY,
+            title: 'This card payment was authorized, but not captured. It could still succeed or fail.',
+            text: 'Authorized',
+        },
+        pending: {
+            variant: BadgeVariant.PRIMARY,
+            title: 'This ACH payment was processed, but the funds have not settled. It could still succeed or fail.',
+            text: 'Pending',
+        },
+        achFailed: {
+            variant: BadgeVariant.DANGER,
+            title: 'The funds couldn\'t be collected for this ACH payment (in addition to the original payment, an ACH return and fee will appear in a payout)',
+            text: 'ACH Failed',
+        },
+        failed: {
+            variant: BadgeVariant.DANGER,
+            title: 'This card payment did not go through (it will not appear in a payout)',
+            text: 'Failed',
+        },
+        canceled: {
+            variant: BadgeVariant.DANGER,
+            title: 'This payment was canceled',
+            text: 'Canceled',
+        },
+        disputed: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'The account holder disputed this payment. The amount has been returned and a fee assessed.',
+            text: 'Disputed',
+        },
+        fully_refunded: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'The full amount of this payment has been refunded',
+            text: 'Fully Refunded',
+        },
+        partially_refunded: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'A portion of this payment has been refunded',
+            text: 'Partially Refunded',
+        },
+    };
+    const badgeProps = statusToBadgeProps[status];
+    return h(Badge, Object.assign({}, badgeProps));
 };
 
 export { MapPaymentStatusToBadge as M };

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

@@ -1,12 +1,25 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as formatCurrency, a as formatDate, b as formatTime } from './utils2.js';
+import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+import { a as formatDate, b 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';
-import { T as badge } from './parts.js';
-import { S as Spinner } from './spinner.js';
 import { d as defineCustomElement$1 } from './details.js';
 import { M as MapPayoutStatusToBadge } from './payouts-status.js';
+import { S as Skeleton } from './skeleton.js';
+
+const PayoutDetailsLoading = () => (h("div", { class: "row gap-3" },
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "35%", height: "30px" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "70%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "40%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "40%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "100%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "80%" }))));
 
 const PayoutDetailsCore = /*@__PURE__*/ proxyCustomElement(class PayoutDetailsCore extends HTMLElement {
     constructor() {
@@ -61,7 +74,7 @@ const PayoutDetailsCore = /*@__PURE__*/ proxyCustomElement(class PayoutDetailsCo
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '00dce2f3bddb29647880b82a2055580346b7ff38' }, this.loading && h(Spinner, { key: 'de524e2f77fb4dd20f4fcb7dff41f256f3ee74b5' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'c0b7449ff0e5773be97fb27485638acdce79b50a', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '1aa8719fb989c9993ac30803440d16ce3590038e', slot: "head-info", badge: h("span", { slot: 'badge', part: 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: '30c9240747e66e38056cd870e5703b4d027b3ea2', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '2d93c5594c1451a3d566afe0431da34994ccc94a', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'd9116166e2c7f95e8a7e110146f492bf0329e01e', title: "ID", value: this.payout.id }), h("div", { key: '9b3c12058b396637632c3d46a24ed426a1bd518c', class: "m-4" }, h(Button, { key: 'eaf5339cb60b3ae759b0ca94ffb07f20f044feec', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '61372b0167f0a07231fd1cf69d61f156e42c3a0a', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '6113095a35b746b7b03e15af9e195fe7247148c0', sectionTitle: "Details" }), h("div", { key: 'dcdc2cf2c73516e603492aae6f81a12a2dd10d1f', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '797cf1e1b4a0521ff01a8c985c260b998ad3d3e9', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'bd3162d95fa4a98e2db4e42a9de39c91ca209b45', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'adef2b9dcbad873f570530761cf887c9a4efa052', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '8c6ca766f17f9dd140fa0778fecd648a72244b92', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '4c4448677902c19011cf36b0d71d85eb54083bbf', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '7f4a0ed8518b957cbfcfb15e5ea62963e5ba5013', sectionTitle: "Account" }), h("div", { key: '3d878a54ddffb40e55610224fc97f182f4255e51', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'd9eb8870ca1b4bf0c04bcb2f3b4362ebf9712a88', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'f320a0fb646a5352173341083f384bd6d7a30a61', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '35cc07ec9ee8e3155606851eeb9864d9f6df6e05', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'ac0962b80347b619e4cc534781df397d9bc510e2', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '65db983d9504b912f12cefc7eea7a5bc8e9f3d73', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'bc94a109cf5e2c4dcd32972387a4b167b85d8ccc', sectionTitle: 'Metadata' }), h("div", { key: '1918677f3559ff779b3f1613ee9b2367110f4648', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '2b5dd103cebe0960bdcc6a68f7389780e9d1029b', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: 'ace7565dae883381e2668214e01cc949470f4a6a' }, this.loading && h(PayoutDetailsLoading, { key: '9412e6135da55bddc2964b87065f212bdb1399eb' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'df9b5bf40cc35a5366e9b1ed296b0e289a9f182c', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '64575c2f0be0beaf72094c0dfe9a343fdcd25c88', 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: 'c95da0d064416dd0fbdff948c92dcd2b116e1da5', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '765da16cba8659fecc6a4c11b2856f8b1edc3a32', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'ff60105de95f6ef897618a5e7cef2fb39257b9c5', title: "ID", value: this.payout.id }), h("div", { key: '8444116278f29220fe7260d6849ed7db2296d4b4', class: "m-4" }, h(Button, { key: '686e61a3ea27b62024e3544c32542e9ca710c96f', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '5d70b7fcd4ac63002659ffc08c3c18e4b18e3f46', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '8d17ae90696880259707d0500873127c7f134339', sectionTitle: "Details" }), h("div", { key: '80111eb713f6b643a415aaf66accfdb9e279fe03', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'a7c7809a862b315960fd3f7aa5c73c45efb55512', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'b9b03681675854eb3f0d1445f45b1e20a648ded4', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'fa34b24385e0638d7ccd8ceb7382a1f113f0c966', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '6acc6435f7f8b277abd35a8ac90e01556aaab18e', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '560cedeb5230503e74e90bb3e531aed21d317f6c', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '42e2d36cb570acad67366e65316a22dac8f4d4fc', sectionTitle: "Account" }), h("div", { key: 'f2eebf080a48ba0d818363c09269689e201ed5fc', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '6064911935f9e3ef75db3ec7707dd3a182c98c5c', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'eb44916f2659dfc6d81f4e995b3f34527d15e6c2', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '0dbf8e17dfbc1ff1cd70be1d67a6907b91478a98', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '2b377f8749d66f6fd58f5a8437c1e21fbb774706', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '886cc82be28c9cd86200adf78a61846fece1cf40', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'ec5c8ab11778eff8b89be26f85c7172d38b5d4b3', sectionTitle: 'Metadata' }), h("div", { key: '9c72eeee6fb33e536c8425ba1dd6d4a0c8b066ce', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '85ea6096635c9bb6c8fc0b5298dd4cbb6411392c', metadata: this.payout.metadata })))))));
     }
     static get watchers() { return {
         "getPayout": ["getPayoutWatcher"]