@justifi/webcomponents 5.0.0 → 5.1.0

package/dist/module/billing-form.js

@@ -1,99 +1,6 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as create$3, F as FormController } from './form.js';
-import { i as identityNameValidation, l as lineOneValidation, c as lineTwoValidation, d as cityValidation, e as stateValidation, f as postalValidation } from './schema-validations.js';
-import { S as StateOptions } from './state-options.js';
-import { n as numberOnlyHandler } from './utils4.js';
-import { d as defineCustomElement$4 } from './custom-popper2.js';
-import { d as defineCustomElement$3 } from './form-control-select2.js';
-import { d as defineCustomElement$2 } from './form-control-text2.js';
-import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
+import { B as BillingForm$1, d as defineCustomElement$1 } from './billing-form2.js';
 
-const BillingFormSchema = create$3({
-    name: identityNameValidation.required('Enter full name'),
-    address_line1: lineOneValidation.required('Enter street address'),
-    address_line2: lineTwoValidation.nullable(),
-    address_city: cityValidation.required('Enter city'),
-    address_state: stateValidation.required('Select state'),
-    address_postal_code: postalValidation.required('Enter postal code'),
-});
+const BillingForm = BillingForm$1;
+const defineCustomElement = defineCustomElement$1;
 
-const BillingForm = /*@__PURE__*/ proxyCustomElement(class BillingForm extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.inputHandler = (name, value) => {
-            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
-        };
-        this.legend = undefined;
-        this.formController = undefined;
-        this.billingInfo = undefined;
-        this.errors = {};
-    }
-    componentWillLoad() {
-        this.formController = new FormController(BillingFormSchema);
-    }
-    componentDidLoad() {
-        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
-        this.formController.errors.subscribe(errors => {
-            this.errors = Object.assign({}, errors);
-        });
-    }
-    async getValues() {
-        return this.formController.values.getValue();
-    }
-    async fill(fields) {
-        this.formController.setInitialValues(fields);
-    }
-    async validate() {
-        let isValid = await this.formController.validate();
-        return { isValid: isValid };
-    }
-    render() {
-        const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { key: 'b3bb548839b39a87ad330b9048426baff317cae0' }, h("form", { key: '32e999825e5094e8e5399d46f67b67186f18d7b2' }, h("fieldset", { key: 'c8f13e2d392c45804bb51907a21ff80cb1148fd3' }, this.legend && h("legend", { key: 'c4117087a3391f8c28815069d832d6133459b250' }, this.legend), h("div", { key: '61d9de519f93d42bab36670108a6b923e30cff7f', class: "row gy-3" }, h("div", { key: '4753e297cbab92db6f073e9679ea9f3e9dacf432', class: "col-12" }, h("form-control-text", { key: '1f366def4cd8449cc242eb3bd71952a1548def08', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'c7efc6968d6f776be84ac16b56a785965a81501b', class: "col-12" }, h("form-control-text", { key: '789ca132aabfe42381ce55ec343494b9ac766e73', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: 'f750e3800a361e78c58a31091b8d07437fe7fdcf', class: "col-12" }, h("form-control-text", { key: '66e06c53dec8b254bf5f7b1d4029c17523f2ceb7', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: '9868c2a9bcbed8c65ac8ca8d89ea2102fd0dd1c6', class: "col-12" }, h("form-control-text", { key: 'a637775b91a89fa32c54c97e6a97ec18b2e69024', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: '274656a1a879790c99a684da3aa6070f473e2d0b', class: "col-12" }, h("form-control-select", { key: '5fca9ff62f2e2f26fc936474133dbdf24183e86d', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: 'e24b2e9961e1a464a1d99fa4982814e7d43c5a79', class: "col-12" }, h("form-control-text", { key: '1992d68c496b1331a0efbbbeb03153f9155a77d3', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler })))))));
-    }
-}, [0, "justifi-billing-form", {
-        "legend": [1025],
-        "formController": [32],
-        "billingInfo": [32],
-        "errors": [32],
-        "getValues": [64],
-        "fill": [64],
-        "validate": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-billing-form", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-billing-form":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, BillingForm);
-            }
-            break;
-        case "custom-popper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "form-control-select":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "form-control-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "form-control-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { BillingForm as B, defineCustomElement as d };
+export { BillingForm, defineCustomElement };

package/dist/module/billing-form2.js

@@ -0,0 +1,90 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { B as BillingFormSchema } from './billing-form-schema.js';
+import { S as StateOptions } from './state-options.js';
+import { F as FormController } from './form.js';
+import { n as numberOnlyHandler } from './utils3.js';
+import { d as defineCustomElement$4 } from './custom-popper2.js';
+import { d as defineCustomElement$3 } from './form-control-select2.js';
+import { d as defineCustomElement$2 } from './form-control-text2.js';
+import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
+
+const BillingForm = /*@__PURE__*/ proxyCustomElement(class BillingForm extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+        this.legend = undefined;
+        this.formController = undefined;
+        this.billingInfo = undefined;
+        this.errors = {};
+    }
+    componentWillLoad() {
+        this.formController = new FormController(BillingFormSchema);
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async fill(fields) {
+        this.formController.setInitialValues(fields);
+    }
+    async validate() {
+        let isValid = await this.formController.validate();
+        return { isValid: isValid };
+    }
+    render() {
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        return (h(Host, { key: '2763b7ac25e51e9d206d6a0bc6ed28ec13f54cc3' }, h("form", { key: '758b52530cc945e9c3ce5a2ee11838a3776abc6b' }, h("fieldset", { key: '2ab7312e043d3cbc03993f11ac5692692319af4b' }, this.legend && h("legend", { key: '8e324a5bb2fabc975742e866341a3434e1950a3c' }, this.legend), h("div", { key: 'fafd0d9fa2784341dc80fea8c53d081d2c84af5d', class: "row gy-3" }, h("div", { key: '3aa18a756f3ea6ff9dcfa061cd845c714cab3540', class: "col-12" }, h("form-control-text", { key: '4b75c876eef667f3d353c802376774e7c1af1b84', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'dddc81024aef4757c18b31db84204fc9e70f9ab1', class: "col-12" }, h("form-control-text", { key: 'd9d63301e3d87885de9414164c820df2013cb6ae', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: 'f96675211a63fc785b9e759aef44f4dd4b22e0a3', class: "col-12" }, h("form-control-text", { key: 'f2c6a24150d640f9efbfa1748f577e32550b3507', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: '83cf74afae2c4e899151cc5461a06632fef3c756', class: "col-12" }, h("form-control-text", { key: 'cbbf7dfac17eb69b2c9e80534051822cd4f94afd', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: '9331b691855dc4f9a60b746089552228a5b12942', class: "col-12" }, h("form-control-select", { key: 'f0f726fe2633ab45754691726a0008c4e50f41ac', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: '0d1d00ca86d09a370330cd9f3807783a8cd981a4', class: "col-12" }, h("form-control-text", { key: '0e43cfe70ca05a3d795d82f554453d12562b2ec9', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler })))))));
+    }
+}, [0, "billing-form", {
+        "legend": [1025],
+        "formController": [32],
+        "billingInfo": [32],
+        "errors": [32],
+        "getValues": [64],
+        "fill": [64],
+        "validate": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["billing-form", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "billing-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BillingForm);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BillingForm as B, defineCustomElement as d };

package/dist/module/business-additional-questions-form-step-core.js

@@ -4,7 +4,8 @@ import { F as FormController } from './form.js';
 import { A as AdditionalQuestions } from './Business.js';
 import { C as CURRENCY_MASK } from './form-input-masks.js';
 import { h as heading2 } from './parts.js';
-import { b as businessServiceReceivedOptions, r as recurringPaymentsOptions, s as seasonalBusinessOptions } from './business-form-options.js';
+import { P as PaymentProvisioningLoading } from './payment-provisioning-loading.js';
+import { a as businessServiceReceivedOptions, r as recurringPaymentsOptions, s as seasonalBusinessOptions } from './business-form-options.js';
 import { B as BusinessFormStep } from './event-types2.js';
 import { d as defineCustomElement$5 } from './custom-popper2.js';
 import { d as defineCustomElement$4 } from './form-control-monetary2.js';
@@ -21,6 +22,7 @@ const AdditionalQuestionsFormStepCore = /*@__PURE__*/ proxyCustomElement(class A
         this.formLoading = createEvent(this, "formLoading", 7);
         this.getData = () => {
             this.formLoading.emit(true);
+            this.isLoading = true;
             this.getBusiness({
                 onSuccess: (response) => {
                     this.additional_questions = new AdditionalQuestions(response.data.additional_questions || {});
@@ -33,7 +35,10 @@ const AdditionalQuestionsFormStepCore = /*@__PURE__*/ proxyCustomElement(class A
                         severity: severity
                     });
                 },
-                final: () => this.formLoading.emit(false)
+                final: () => {
+                    this.formLoading.emit(false);
+                    this.isLoading = false;
+                }
             });
         };
         this.sendData = (onSuccess) => {
@@ -67,6 +72,7 @@ const AdditionalQuestionsFormStepCore = /*@__PURE__*/ proxyCustomElement(class A
         this.errors = {};
         this.additional_questions = {};
         this.recurringPayments = false;
+        this.isLoading = false;
         this.getBusiness = undefined;
         this.patchBusiness = undefined;
         this.allowOptionalFields = undefined;
@@ -99,7 +105,10 @@ const AdditionalQuestionsFormStepCore = /*@__PURE__*/ proxyCustomElement(class A
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
         const additionalQuestionsDefaultValue = this.formController.getInitialValues();
-        return (h("form", { key: '064a079c1a44d2d0149f68cf9d30086205275838' }, h("fieldset", { key: 'b380a225a7080f9b733de3adf7e3ee574116e870' }, h("div", { key: 'caa57d2bd552fb384f9d703524fb908d7df75e03', class: "d-flex align-items-center gap-2" }, h("legend", { key: '3be6ea38780905e7b3fe261fa901445cd1a0259f', class: "mb-0", part: heading2 }, "Additional Questions"), h("form-control-tooltip", { key: '3aab9d08eeeea7a65fc6a8f38f4a0210fa8ee718', helpText: "This information helps us understand the business and identify and monitor trends to safeguard you and your customers." })), h("hr", { key: 'b92e8f12fd4155efcb05739501fb4639403e0694', class: "mt-2" }), h("div", { key: 'b4b8cac0c7039084e2a1a1b34974bb7f89bf24a2', class: "row gy-3" }, h("div", { key: '11f218ce7b13285d3aad396d72d9e5a07ddd1ad7', class: "col-12 col-md-6" }, h("form-control-monetary", { key: '96b53fe22ce54cd5caa9819897581b13174ff701', name: "business_revenue", label: "What is your business\u2019 estimated annual revenue from its primary business activities?", inputHandler: this.inputHandler, errorText: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.business_revenue, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_revenue, maskOptions: CURRENCY_MASK.WHOLE })), h("div", { key: 'a2b06ca931b4ac3e7a48b81e65195390ed0042cf', class: "col-12 col-md-6" }, h("form-control-monetary", { key: '5b894031a24d627f3ae91410c3af026509fc8d45', name: "business_payment_volume", label: "What is your business' annual credit card & ACH volume anticipated to process?", inputHandler: this.inputHandler, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.business_payment_volume, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_payment_volume, maskOptions: CURRENCY_MASK.WHOLE })), h("div", { key: '244c089ad87fbbca94b4d164016f4f446945b6e3', class: "col-12" }, h("form-control-select", { key: '2664aa0485966ed8a4742d2f78ae706283f7a9a9', name: "business_when_service_received", label: "On average, how long after paying will your customers typically receive their goods or services?", inputHandler: this.inputHandler, errorText: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.business_when_service_received, options: businessServiceReceivedOptions, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_when_service_received })), h("div", { key: 'ea44cfd2e01d1a214c28b9a3c21a374b55f7d6df', class: "col-12" }, h("form-control-select", { key: '9f6e6929ac702b71e6b9861cd06f0ee06bc41cb8', name: "business_recurring_payments", label: "Does your business offer recurring payments?", inputHandler: this.inputHandler, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.business_recurring_payments, options: recurringPaymentsOptions, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_recurring_payments })), h("div", { key: '58091269a3d5e0957271a2917aa34c85052a93b8', class: 'col-12', hidden: !this.recurringPayments }, h("form-control-text", { key: '18fa653b4c9aec51d054ffad35e6c3f030ad89a4', name: "business_recurring_payments_percentage", label: "What percent of revenue is generated from each recurring payment type offered?", inputHandler: this.inputHandler, errorText: (_e = this.errors) === null || _e === void 0 ? void 0 : _e.business_recurring_payments_percentage, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_recurring_payments_percentage, helpText: "For example: 50% monthly, 50% annual." })), h("div", { key: 'c525df2e0565502408bfb285051fa28d5bf21ccf', class: "col-12" }, h("form-control-select", { key: '10422ff6edece7ce860586dfc244583805fd3f50', name: "business_seasonal", label: "Is this business seasonal?", inputHandler: this.inputHandler, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.business_seasonal, options: seasonalBusinessOptions, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_seasonal })), h("div", { key: '2a3cb0362556081e331a78065fbca341f156ba33', class: "col-12" }, h("form-control-text", { key: 'c7a9edc8d9a465197afa813906a9abd6455a45f0', name: "business_other_payment_details", label: "Is there anything else you would like us to know about how your customers pay the business? (optional)", inputHandler: this.inputHandler, errorText: (_g = this.errors) === null || _g === void 0 ? void 0 : _g.business_other_payment_details, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_other_payment_details }))))));
+        if (this.isLoading) {
+            return h(PaymentProvisioningLoading, null);
+        }
+        return (h("form", null, h("fieldset", null, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Additional Questions"), h("form-control-tooltip", { helpText: "This information helps us understand the business and identify and monitor trends to safeguard you and your customers." })), h("hr", { class: "mt-2" }), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-monetary", { name: "business_revenue", label: "What is your business\u2019 estimated annual revenue from its primary business activities?", inputHandler: this.inputHandler, errorText: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.business_revenue, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_revenue, maskOptions: CURRENCY_MASK.WHOLE })), h("div", { class: "col-12 col-md-6" }, h("form-control-monetary", { name: "business_payment_volume", label: "What is your business' annual credit card & ACH volume anticipated to process?", inputHandler: this.inputHandler, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.business_payment_volume, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_payment_volume, maskOptions: CURRENCY_MASK.WHOLE })), h("div", { class: "col-12" }, h("form-control-select", { name: "business_when_service_received", label: "On average, how long after paying will your customers typically receive their goods or services?", inputHandler: this.inputHandler, errorText: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.business_when_service_received, options: businessServiceReceivedOptions, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_when_service_received })), h("div", { class: "col-12" }, h("form-control-select", { name: "business_recurring_payments", label: "Does your business offer recurring payments?", inputHandler: this.inputHandler, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.business_recurring_payments, options: recurringPaymentsOptions, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_recurring_payments })), h("div", { class: 'col-12', hidden: !this.recurringPayments }, h("form-control-text", { name: "business_recurring_payments_percentage", label: "What percent of revenue is generated from each recurring payment type offered?", inputHandler: this.inputHandler, errorText: (_e = this.errors) === null || _e === void 0 ? void 0 : _e.business_recurring_payments_percentage, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_recurring_payments_percentage, helpText: "For example: 50% monthly, 50% annual." })), h("div", { class: "col-12" }, h("form-control-select", { name: "business_seasonal", label: "Is this business seasonal?", inputHandler: this.inputHandler, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.business_seasonal, options: seasonalBusinessOptions, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_seasonal })), h("div", { class: "col-12" }, h("form-control-text", { name: "business_other_payment_details", label: "Is there anything else you would like us to know about how your customers pay the business? (optional)", inputHandler: this.inputHandler, errorText: (_g = this.errors) === null || _g === void 0 ? void 0 : _g.business_other_payment_details, defaultValue: additionalQuestionsDefaultValue === null || additionalQuestionsDefaultValue === void 0 ? void 0 : additionalQuestionsDefaultValue.business_other_payment_details }))))));
     }
     static get watchers() { return {
         "additional_questions": ["recurringPaymentsWatcher"]
@@ -112,6 +121,7 @@ const AdditionalQuestionsFormStepCore = /*@__PURE__*/ proxyCustomElement(class A
         "errors": [32],
         "additional_questions": [32],
         "recurringPayments": [32],
+        "isLoading": [32],
         "validateAndSubmit": [64]
     }, undefined, {
         "additional_questions": ["recurringPaymentsWatcher"]

package/dist/module/business-additional-questions-form-step.js

@@ -51,7 +51,7 @@ const AdditionalQuestionsFormStep = /*@__PURE__*/ proxyCustomElement(class Addit
         }
     }
     render() {
-        return (h("justifi-additional-questions-form-step-core", { key: 'bef3e4d67c4ccbb25dae52291ba9a399e854fb53', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-additional-questions-form-step-core", { key: 'ecc4bb3b51a4b6cb48e38230826784c5af623d88', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],

package/dist/module/business-additional-questions-schema.js

@@ -1,5 +1,5 @@
 import { c as create$3 } from './form.js';
-import { r as revenueValidation, p as paymentVolumeValidation, w as whenServiceReceivedValidation, a as recurringPaymentsValidation, b as recurringPaymentsPercentageValidation, s as seasonalBusinessValidation, o as otherPaymentDetailsValidation } from './schema-validations.js';
+import { r as revenueValidation, b as paymentVolumeValidation, w as whenServiceReceivedValidation, d as recurringPaymentsValidation, e as recurringPaymentsPercentageValidation, f as seasonalBusinessValidation, o as otherPaymentDetailsValidation } from './schema-validations.js';
 
 const additionalQuestionsSchema = (allowOptionalFields) => {
     const schema = create$3({

package/dist/module/business-address-schema.js

@@ -1,5 +1,5 @@
 import { c as create$3, a as create$6 } from './form.js';
-import { l as lineOneValidation, c as lineTwoValidation, d as cityValidation, e as stateValidation, f as postalValidation } from './schema-validations.js';
+import { l as lineOneValidation, a as lineTwoValidation, c as cityValidation, s as stateValidation, p as postalValidation } from './schema-validations.js';
 
 const addressSchema = (allowOptionalFields) => {
     const schema = create$3({

package/dist/module/business-bank-account-form-step-core.js

@@ -0,0 +1,206 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as create$3, F as FormController } from './form.js';
+import { g as bankNameValidation, n as nicknameValidation, i as identityNameValidation, h as accountTypeValidation, j as accountNumberValidation, k as routingNumberValidation } from './schema-validations.js';
+import { c as bankAccountTypeOptions } from './business-form-options.js';
+import { B as BusinessFormStep } from './event-types2.js';
+import { n as numberOnlyHandler } from './utils3.js';
+import { h as heading2 } from './parts.js';
+import { d as defineCustomElement$4 } from './custom-popper2.js';
+import { d as defineCustomElement$3 } from './form-control-select2.js';
+import { d as defineCustomElement$2 } from './form-control-text2.js';
+import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
+
+const businessBankAccountSchema = (allowOptionalFields) => {
+    const schema = create$3({
+        bank_name: bankNameValidation.required('Enter bank name'),
+        nickname: nicknameValidation.required('Enter nickname'),
+        account_owner_name: identityNameValidation.required('Enter account owner name'),
+        account_type: accountTypeValidation.required('Select account type'),
+        account_number: accountNumberValidation.required('Enter account number'),
+        routing_number: routingNumberValidation.required('Enter routing number')
+    });
+    const easySchema = create$3({
+        bank_name: bankNameValidation.nullable(),
+        nickname: nicknameValidation.nullable(),
+        account_owner_name: identityNameValidation.nullable(),
+        account_type: accountTypeValidation.nullable(),
+        account_number: accountNumberValidation.nullable(),
+        routing_number: routingNumberValidation.nullable()
+    });
+    return allowOptionalFields ? easySchema : schema;
+};
+
+class BankAccount {
+    constructor(data) {
+        this.id = data.id;
+        this.account_owner_name = data.account_owner_name;
+        this.full_name = data.full_name;
+        this.account_type = data.account_type;
+        this.account_number = data.account_number;
+        this.acct_last_four = data.acct_last_four;
+        this.account_number_last4 = data.account_number_last4;
+        this.routing_number = data.routing_number;
+        this.bank_name = data.bank_name;
+        this.country = data.country;
+        this.currency = data.currency;
+        this.nickname = data.nickname;
+        this.metadata = data.metadata;
+        this.business_id = data.business_id;
+        this.platform_account_id = data.platform_account_id;
+        this.created_at = data.created_at;
+        this.updated_at = data.updated_at;
+    }
+    get payload() {
+        return {
+            account_owner_name: this.account_owner_name || '',
+            account_type: this.account_type || '',
+            account_number: this.account_number || '',
+            routing_number: this.routing_number || '',
+            bank_name: this.bank_name || '',
+            nickname: this.nickname || '',
+            business_id: this.business_id || '',
+        };
+    }
+}
+
+const BusinessBankAccountFormStepCore = /*@__PURE__*/ proxyCustomElement(class BusinessBankAccountFormStepCore extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.stepCompleteEvent = createEvent(this, "complete-form-step-event", 7);
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.formLoading = createEvent(this, "formLoading", 7);
+        this.getData = () => {
+            this.formLoading.emit(true);
+            this.getBusiness({
+                onSuccess: (response) => {
+                    if (response.data.bank_accounts.length > 0) {
+                        this.bankAccount = new BankAccount(response.data.bank_accounts[0]);
+                    }
+                    else {
+                        this.bankAccount = new BankAccount({});
+                        this.bankAccount.business_id = this.businessId;
+                    }
+                    this.formController.setInitialValues(Object.assign({}, this.bankAccount));
+                },
+                onError: ({ error, code, severity }) => {
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity: severity
+                    });
+                },
+                final: () => this.formLoading.emit(false)
+            });
+        };
+        this.sendData = (onSuccess) => {
+            let submittedData;
+            this.formLoading.emit(true);
+            this.postBankAccount({
+                payload: this.postPayload,
+                onSuccess: (response) => {
+                    submittedData = response;
+                    onSuccess();
+                },
+                onError: ({ error, code, severity }) => {
+                    submittedData = error;
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity: severity
+                    });
+                },
+                final: () => {
+                    this.stepCompleteEvent.emit({ response: submittedData, formStep: BusinessFormStep.bankAccount });
+                    this.formLoading.emit(false);
+                }
+            });
+        };
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+        this.formController = undefined;
+        this.errors = {};
+        this.bankAccount = {};
+        this.businessId = undefined;
+        this.getBusiness = undefined;
+        this.postBankAccount = undefined;
+        this.allowOptionalFields = undefined;
+    }
+    async validateAndSubmit({ onSuccess }) {
+        if (this.formDisabled) {
+            this.stepCompleteEvent.emit({ response: null, formStep: BusinessFormStep.bankAccount, metadata: 'no data submitted' });
+            onSuccess();
+        }
+        else {
+            this.formController.validateAndSubmit(() => this.sendData(onSuccess));
+        }
+    }
+    ;
+    get postPayload() {
+        let formValues = new BankAccount(this.formController.values.getValue()).payload;
+        return formValues;
+    }
+    get formDisabled() {
+        var _a;
+        return !!((_a = this.bankAccount) === null || _a === void 0 ? void 0 : _a.id);
+    }
+    componentWillLoad() {
+        this.getBusiness && this.getData();
+        this.formController = new FormController(businessBankAccountSchema(this.allowOptionalFields));
+    }
+    componentDidLoad() {
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    render() {
+        const bankAccountDefaultValue = this.formController.getInitialValues();
+        return (h("form", { key: '84a444f4bc791c0238ddd500427a53dab94e51d1' }, h("fieldset", { key: '61236bd7bd190808f14292d5e83592b94110b556' }, h("div", { key: 'fc6a64fcec2a8e31e5b4e95d84ef8cda9080dc03', class: "d-flex align-items-center gap-2" }, h("legend", { key: 'baaf43c5bd37c5a52162dc8bfc6a476e2ac0f2e0', class: "mb-0", part: heading2 }, "Bank Account Info"), h("form-control-tooltip", { key: 'c9ceaee51d98c816f49008f64a00fa91f3660252', helpText: "The Direct Deposit Account is the business bank account where your funds will be deposited. The name of this account must match the registered business name exactly. We are not able to accept personal accounts unless your business is a registered sole proprietorship." })), h("hr", { key: 'ef877615f7e47ac868d2d5548b0e1b290ccaba10', class: "mt-2" }), h("div", { key: 'a3a85ce7d292d4b0de58317a35b95b2a2ecdfdfc', class: "row gy-3" }, h("div", { key: '436c9447287ebe80d96ae73afeef0e03335440b9', class: "col-12" }, h("form-control-text", { key: 'a208de7ff6c9e5314577c55617d5974c6aac141b', name: "bank_name", label: "Bank Name", defaultValue: bankAccountDefaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '38d945adb0861a4ac8ff30256c69d6f9f8c22461', class: "col-12" }, h("form-control-text", { key: 'a604836cf36f6da139c99165c4a4fafbe6d03bd4', name: "nickname", label: "Nickname", defaultValue: bankAccountDefaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '0a4a89a55a47c25b7607695e216a58a8a30432ba', class: "col-12" }, h("form-control-text", { key: '9623bac603a6086f07507b0cdb3d6081653b75a6', name: "account_owner_name", label: "Account Owner Name", defaultValue: bankAccountDefaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '9e91ad400d741ca574552bbd6c00868a3ca47064', class: "col-12" }, h("form-control-select", { key: '40a15cc46d9cf990f84253515c640fb163b78acc', name: "account_type", label: "Account Type", options: bankAccountTypeOptions, defaultValue: bankAccountDefaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '066c707b74990627e6f02521c9b1f1fc3f2cad87', class: "col-12" }, h("form-control-text", { key: '2011e01ea7c8900ab9bab23c8e5aa3a3aea746fd', name: "account_number", label: "Account Number", defaultValue: bankAccountDefaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, disabled: this.formDisabled, helpText: "Please copy the account number as shown on your statement/check. Do not include spaces or dashes." })), h("div", { key: 'a539cbaf626cb72c898348857a9c618454ca989e', class: "col-12" }, h("form-control-text", { key: '974c87eac9091f5ce08f342d9ce1259d86d05cc8', name: "routing_number", label: "Routing Number", defaultValue: bankAccountDefaultValue.routing_number, maxLength: 9, errorText: this.errors.routing_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, disabled: this.formDisabled, helpText: "A valid routing number is nine digits. Please include any leading or trailing zeroes." }))))));
+    }
+}, [0, "justifi-business-bank-account-form-step-core", {
+        "businessId": [1, "business-id"],
+        "getBusiness": [16],
+        "postBankAccount": [16],
+        "allowOptionalFields": [4, "allow-optional-fields"],
+        "formController": [32],
+        "errors": [32],
+        "bankAccount": [32],
+        "validateAndSubmit": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["justifi-business-bank-account-form-step-core", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "justifi-business-bank-account-form-step-core":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BusinessBankAccountFormStepCore);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BusinessBankAccountFormStepCore as B, defineCustomElement as d };