@justifi/webcomponents 5.0.0 → 5.1.0

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

@@ -1,189 +1,76 @@
 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 { A as Api } from './Api.js';
-import './Checkout.js';
-import './Pagination.js';
-import './Payment.js';
-import './SubAccount.js';
-import { c as config } from './config.js';
-import { n as numberOnlyHandler } from './utils4.js';
 import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
-import { h as heading2 } from './parts.js';
-import { c as bankAccountTypeOptions } from './business-form-options.js';
-import { B as BusinessFormStep } from './event-types2.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.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;
-    }
-}
+import { m as makeGetBusiness, b as makePostBankAccount } from './payment-provisioning-actions.js';
+import { B as BusinessService, a as BusinessBankAccountService } from './business.service.js';
+import { d as defineCustomElement$5 } from './custom-popper2.js';
+import { d as defineCustomElement$4 } from './form-control-select2.js';
+import { d as defineCustomElement$3 } from './form-control-text2.js';
+import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$1 } from './business-bank-account-form-step-core.js';
 
 const BusinessBankAccountFormStep = /*@__PURE__*/ proxyCustomElement(class BusinessBankAccountFormStep 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.fetchData = async () => {
-            this.formLoading.emit(true);
-            try {
-                const response = await this.api.get(this.businessEndpoint);
-                if (response.data.bank_accounts.length > 0) {
-                    this.bankAccount = Object.assign({}, new BankAccount(response.data.bank_accounts[0]));
-                }
-                else {
-                    this.bankAccount = Object.assign({}, new BankAccount({}));
-                }
-                this.formController.setInitialValues(Object.assign({}, this.bankAccount));
-            }
-            catch (error) {
-                this.errorEvent.emit({
-                    errorCode: ComponentErrorCodes.FETCH_ERROR,
-                    message: error.message,
-                    severity: ComponentErrorSeverity.ERROR,
-                    data: error,
-                });
-            }
-            finally {
-                this.formLoading.emit(false);
-            }
-        };
-        this.sendData = async (onSuccess) => {
-            this.formLoading.emit(true);
-            try {
-                const formValues = this.formController.values.getValue();
-                const payload = Object.assign(Object.assign({}, formValues), { business_id: this.businessId });
-                const response = await this.api.post(this.bankAccountEndpoint, payload);
-                this.handleResponse(response, onSuccess);
-            }
-            catch (error) {
-                this.errorEvent.emit({
-                    errorCode: ComponentErrorCodes.POST_ERROR,
-                    message: error.message,
-                    severity: ComponentErrorSeverity.ERROR,
-                    data: error,
-                });
-            }
-            finally {
-                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 = undefined;
+        this.getBusiness = undefined;
+        this.postBankAccount = undefined;
         this.authToken = undefined;
         this.businessId = undefined;
         this.allowOptionalFields = undefined;
     }
-    get businessEndpoint() {
-        return `entities/business/${this.businessId}`;
+    propChanged() {
+        this.initializeApi();
     }
-    get bankAccountEndpoint() {
-        return `entities/bank_accounts`;
+    async validateAndSubmit({ onSuccess }) {
+        this.coreComponent.validateAndSubmit({ onSuccess });
     }
-    get formDisabled() {
-        var _a;
-        return !!((_a = this.bankAccount) === null || _a === void 0 ? void 0 : _a.id);
+    componentWillLoad() {
+        this.initializeApi();
     }
-    handleResponse(response, onSuccess) {
-        if (response.error) {
-            this.errorEvent.emit({
-                errorCode: ComponentErrorCodes.POST_ERROR,
-                message: response.error.message,
-                severity: ComponentErrorSeverity.ERROR,
-                data: response.error,
+    initializeApi() {
+        if (this.authToken && this.businessId) {
+            this.getBusiness = makeGetBusiness({
+                authToken: this.authToken,
+                businessId: this.businessId,
+                service: new BusinessService()
+            });
+            this.postBankAccount = makePostBankAccount({
+                authToken: this.authToken,
+                service: new BusinessBankAccountService()
             });
         }
         else {
-            onSuccess();
-        }
-        this.stepCompleteEvent.emit({ response: response, formStep: BusinessFormStep.bankAccount });
-    }
-    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));
-        }
-    }
-    ;
-    componentWillLoad() {
-        this.formController = new FormController(businessBankAccountSchema(this.allowOptionalFields));
-        this.api = Api({ authToken: this.authToken, apiOrigin: config.proxyApiOrigin });
-        if (this.businessId && this.authToken) {
-            this.fetchData();
+            this.errorEvent.emit({
+                message: 'Missing required props',
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
-    componentDidLoad() {
-        this.formController.values.subscribe(values => this.bankAccount = Object.assign({}, values));
-        this.formController.errors.subscribe(errors => {
-            this.errors = Object.assign({}, errors);
-        });
-    }
     render() {
-        const bankAccountDefaultValue = this.formController.getInitialValues();
-        return (h("form", { key: 'd326af8d567422ee342571d35119497cd5983a7f' }, h("fieldset", { key: '4ada14e070e9f9b1f12aa3288af50e78c8d7e2f3' }, h("div", { key: 'e9e104ca5ddd22fbddb2154d026ec0cb6610426a', class: "d-flex align-items-center gap-2" }, h("legend", { key: '7800c3648bebce9ca000162e3c85f0cc558f045e', class: "mb-0", part: heading2 }, "Bank Account Info"), h("form-control-tooltip", { key: '3dbc31dfc1f7f60b68f10f2666e58ae208bb36cb', 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: '489cf91c3af1050ee1f0babe8fa6ba7fa9d1912d', class: "mt-2" }), h("div", { key: 'cace0eee0e8b9849294b11bad15452b77dcd9ee9', class: "row gy-3" }, h("div", { key: '0697524d52d53ccfab7201e1f06c0f8f477c8da7', class: "col-12" }, h("form-control-text", { key: 'b391b6e7e3f9c1c92f5bb651da2291ca75afc7f3', name: "bank_name", label: "Bank Name", defaultValue: bankAccountDefaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '84afc5c90399809d228561e348f4a6f5fbeeaa48', class: "col-12" }, h("form-control-text", { key: 'add80854eae161c51dfc3006e8f03ef01113291c', name: "nickname", label: "Nickname", defaultValue: bankAccountDefaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: 'f5d31db2be25a09b6f57b78fcac9b6031077d235', class: "col-12" }, h("form-control-text", { key: '5a916bfbad467bd2a55f0159716c29cb78d4d9d0', 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: 'ebce663decaf9bd6b46794b820197c7ba8a450cc', class: "col-12" }, h("form-control-select", { key: 'dd42e72741934d015a1d405b09e7c14b8f865606', 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: '2fa3139ed30465e1e0f9a5075eb13e9c3874aa0a', class: "col-12" }, h("form-control-text", { key: 'f309563391770bd1074b7c29b47c39c5c7ecec5f', 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: '80424fa942fe444ba9137e724ecd50fb4839c59f', class: "col-12" }, h("form-control-text", { key: 'c5e08a9cdbb11c92e3271d6507f6bd3225abdf2f', 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." }))))));
+        return (h("justifi-business-bank-account-form-step-core", { key: '229a91f0c9d52f26cf602d950a4960adf2f090bb', businessId: this.businessId, getBusiness: this.getBusiness, postBankAccount: this.postBankAccount, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
+    static get watchers() { return {
+        "authToken": ["propChanged"],
+        "businessId": ["propChanged"]
+    }; }
 }, [0, "justifi-business-bank-account-form-step", {
         "authToken": [1, "auth-token"],
         "businessId": [1, "business-id"],
         "allowOptionalFields": [4, "allow-optional-fields"],
-        "formController": [32],
-        "errors": [32],
-        "bankAccount": [32],
+        "getBusiness": [32],
+        "postBankAccount": [32],
         "validateAndSubmit": [64]
+    }, undefined, {
+        "authToken": ["propChanged"],
+        "businessId": ["propChanged"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-bank-account-form-step", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
+    const components = ["justifi-business-bank-account-form-step", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-business-bank-account-form-step-core"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-business-bank-account-form-step":
             if (!customElements.get(tagName)) {
@@ -192,20 +79,25 @@ function defineCustomElement() {
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "form-control-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "justifi-business-bank-account-form-step-core":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/module/business-core-info-form-step-core.js

@@ -2,11 +2,12 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { b as businessCoreInfoSchema } from './business-core-info-schema.js';
 import { F as FormController } from './form.js';
 import { C as CoreBusinessInfo } from './Business.js';
-import { a as businessClassificationOptions } from './business-form-options.js';
+import { b as businessClassificationOptions } from './business-form-options.js';
 import { B as BusinessFormStep } from './event-types2.js';
 import { P as PHONE_MASKS } from './form-input-masks.js';
-import { n as numberOnlyHandler } from './utils4.js';
+import { n as numberOnlyHandler } from './utils3.js';
 import { h as heading2 } from './parts.js';
+import { P as PaymentProvisioningLoading } from './payment-provisioning-loading.js';
 import { d as defineCustomElement$6 } from './custom-popper2.js';
 import { d as defineCustomElement$5 } from './form-control-date2.js';
 import { d as defineCustomElement$4 } from './form-control-number-masked2.js';
@@ -23,6 +24,7 @@ const BusinessCoreInfoFormStepCore = /*@__PURE__*/ proxyCustomElement(class Busi
         this.formLoading = createEvent(this, "formLoading", 7);
         this.getData = () => {
             this.formLoading.emit(true);
+            this.isLoading = true;
             this.getBusiness({
                 onSuccess: (response) => {
                     this.coreInfo = new CoreBusinessInfo(response.data);
@@ -35,7 +37,10 @@ const BusinessCoreInfoFormStepCore = /*@__PURE__*/ proxyCustomElement(class Busi
                         severity: severity
                     });
                 },
-                final: () => this.formLoading.emit(false)
+                final: () => {
+                    this.formLoading.emit(false);
+                    this.isLoading = false;
+                }
             });
         };
         this.sendData = (onSuccess) => {
@@ -67,6 +72,7 @@ const BusinessCoreInfoFormStepCore = /*@__PURE__*/ proxyCustomElement(class Busi
         this.formController = undefined;
         this.errors = {};
         this.coreInfo = {};
+        this.isLoading = false;
         this.businessId = undefined;
         this.getBusiness = undefined;
         this.patchBusiness = undefined;
@@ -91,7 +97,10 @@ const BusinessCoreInfoFormStepCore = /*@__PURE__*/ proxyCustomElement(class Busi
     }
     render() {
         const coreInfoDefaultValue = this.formController.getInitialValues();
-        return (h("form", { key: 'be7ba84cae238dd4e2cec58473a059f9e849de1d' }, h("fieldset", { key: 'bffcdb1f1bc2291c3a3db49c4bcb4d43802eaa5a' }, h("div", { key: '164b01cafb65d0dcf089d3a16b21b3ad0d46d1fa', class: "d-flex align-items-center gap-2" }, h("legend", { key: 'd79fe16eb66eed9d3631924a953c3697d6f1bfb3', class: "mb-0", part: heading2 }, "Business Information")), h("hr", { key: '1023f1545c22dad66907a783d63b55ce16382b7b', class: "mt-2" }), h("div", { key: 'df134287b5c5664bf54ae4e2b5b11f2b8319a533', class: "row gy-3" }, h("div", { key: 'cce53f576d682e72388e322dd16e6c09c42c910a', class: "col-12" }, h("form-control-text", { key: 'f5cad3097b85ed81b3e5c3508da63882a7f85676', name: "legal_name", label: "Business Name", defaultValue: coreInfoDefaultValue.legal_name, errorText: this.errors.legal_name, inputHandler: this.inputHandler, helpText: "Enter this exactly as it appears on your tax records (don't use acronyms or abbreviations unless you registered that way)." })), h("div", { key: 'ef85bfc5787d52e086443f6833d25076a8bc6509', class: "col-12" }, h("form-control-text", { key: '960589b0d047d59745db35a5c9b40abf4f95a984', name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, errorText: this.errors.doing_business_as, inputHandler: this.inputHandler, helpText: "Enter this exactly as it appears on your tax records (leave blank if you don't have a registered DBA/trade name)" })), h("div", { key: '74d215b4e04d9e385d471d285f1d174a384628d4', class: "col-12 col-md-8" }, h("form-control-select", { key: 'a983b411c29e445e1e6756565c6ed4438f0f8073', name: "classification", label: "Business Classification", options: businessClassificationOptions, defaultValue: coreInfoDefaultValue.classification, errorText: this.errors.classification, inputHandler: this.inputHandler })), h("div", { key: '4f47ac42d50c1c70c74880dca35da3c15450a54d', class: "col-12 col-md-4" }, h("form-control-date", { key: '215528f63ec5c7608eca00327ddcca2a9f01c8bb', name: "date_of_incorporation", label: "Date of Incorporation", defaultValue: coreInfoDefaultValue.date_of_incorporation, errorText: this.errors.date_of_incorporation, inputHandler: this.inputHandler })), h("div", { key: '3176418ac0930aca1db70018eb2713b899b846bf', class: "col-12 col-md-6" }, h("form-control-text", { key: 'a7785082a03b75bf12f1e59d9e75d28f703cf255', name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, errorText: this.errors.industry, inputHandler: this.inputHandler, helpText: "Describe what you sell" })), h("div", { key: '99f04683422b3925db4bbb063bdecb23704b0943', class: "col-12 col-md-6" }, h("form-control-text", { key: 'a6230862485c14d29076fc2ae70996a433c7a7a8', name: "tax_id", label: "Tax ID (EIN or SSN)", defaultValue: coreInfoDefaultValue.tax_id, errorText: this.errors.tax_id, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, maxLength: 9, helpText: "Employer Identification Numbers (EINs) are nine digits. The federal tax identification number/EIN issued to you by the IRS. It can be found on your tax returns." })), h("div", { key: '278b9cf5e946adf9a72716f4281646165d945374', class: "col-12" }, h("form-control-text", { key: '2436e07602eac21ec2899d781aa20e5ffb15dfbe', name: "website_url", label: "Business Website URL", defaultValue: coreInfoDefaultValue.website_url, errorText: this.errors.website_url, inputHandler: this.inputHandler, helpText: "Don't have a live website? You can use your social media business page, app store link, or staging site URL." })), h("div", { key: 'f28741b03d879dfc4397e84a873494239a9ad6b6', class: "col-12 col-md-6" }, h("form-control-text", { key: '1d018294e912f2698218734f5d674a2344e59257', name: "email", label: "Business Email Address", defaultValue: coreInfoDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'b1eab1ca39410a9fbb7c2c268fe97cdfaa40a126', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '26898a6add7cca817e5abfa45515b59ae2a8fd47', name: "phone", label: "Business Phone Number", defaultValue: coreInfoDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
+        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 }, "Business Information")), h("hr", { class: "mt-2" }), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: "legal_name", label: "Business Name", defaultValue: coreInfoDefaultValue.legal_name, errorText: this.errors.legal_name, inputHandler: this.inputHandler, helpText: "Enter this exactly as it appears on your tax records (don't use acronyms or abbreviations unless you registered that way)." })), h("div", { class: "col-12" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, errorText: this.errors.doing_business_as, inputHandler: this.inputHandler, helpText: "Enter this exactly as it appears on your tax records (leave blank if you don't have a registered DBA/trade name)" })), h("div", { class: "col-12 col-md-8" }, h("form-control-select", { name: "classification", label: "Business Classification", options: businessClassificationOptions, defaultValue: coreInfoDefaultValue.classification, errorText: this.errors.classification, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-date", { name: "date_of_incorporation", label: "Date of Incorporation", defaultValue: coreInfoDefaultValue.date_of_incorporation, errorText: this.errors.date_of_incorporation, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, errorText: this.errors.industry, inputHandler: this.inputHandler, helpText: "Describe what you sell" })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "tax_id", label: "Tax ID (EIN or SSN)", defaultValue: coreInfoDefaultValue.tax_id, errorText: this.errors.tax_id, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, maxLength: 9, helpText: "Employer Identification Numbers (EINs) are nine digits. The federal tax identification number/EIN issued to you by the IRS. It can be found on your tax returns." })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Business Website URL", defaultValue: coreInfoDefaultValue.website_url, errorText: this.errors.website_url, inputHandler: this.inputHandler, helpText: "Don't have a live website? You can use your social media business page, app store link, or staging site URL." })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Business Email Address", defaultValue: coreInfoDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Business Phone Number", defaultValue: coreInfoDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
     }
 }, [0, "justifi-business-core-info-form-step-core", {
         "businessId": [1, "business-id"],
@@ -101,6 +110,7 @@ const BusinessCoreInfoFormStepCore = /*@__PURE__*/ proxyCustomElement(class Busi
         "formController": [32],
         "errors": [32],
         "coreInfo": [32],
+        "isLoading": [32],
         "validateAndSubmit": [64]
     }]);
 function defineCustomElement() {

package/dist/module/business-core-info-form-step.js

@@ -52,7 +52,7 @@ const BusinessCoreInfoFormStep = /*@__PURE__*/ proxyCustomElement(class Business
         }
     }
     render() {
-        return (h("justifi-business-core-info-form-step-core", { key: 'fbaca40250e3cabd3a1ec91f1a10aab53174a23e', businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-business-core-info-form-step-core", { key: '2262521f98ad949fa2558572a991b00b44a2c8c0', businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],

package/dist/module/business-core-info.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { a as businessClassificationOptions } from './business-form-options.js';
+import { b as businessClassificationOptions } from './business-form-options.js';
 import { T as TAX_ID_MASKS, P as PHONE_MASKS } from './form-input-masks.js';
 import { C as CoreBusinessInfo } from './Business.js';
 import { h as heading2 } from './parts.js';
@@ -30,7 +30,7 @@ const BusinessCoreInfo = /*@__PURE__*/ proxyCustomElement(class BusinessCoreInfo
     }
     render() {
         const coreInfoDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { key: 'e4137edfffdb68e6dd792a9b38b13752734f5fd2' }, h("fieldset", { key: '7652930c2d961361969a454b6632ece8d34e9a7b' }, h("legend", { key: 'cb6e3a3eb561d862ea57d74bfd8a59fc8f2bb017', part: heading2 }, "General Info"), h("div", { key: '7becc4c5b16f7a77ff425b40e961fb478e50b3b4', class: "row gy-3" }, h("div", { key: '1c4d8eba65f262bf35e405e38818c2bb489c4c1a', class: "col-12" }, h("form-control-text", { key: 'f71636cf4bb91ee161e6e056cafc275950642e20', name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, errorText: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { key: '1865bb01a25c5f6148331a15804e31f48af4c6e8', class: "col-12" }, h("form-control-text", { key: '9d8a77ea431d826c864fe833fdb7866aa3fc6283', name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, errorText: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { key: 'a271782b9750547ff609653307db7f3bfaccf25b', class: "col-12 col-md-8" }, h("form-control-select", { key: '52144fe64984bfbddc7d4488e48cc44decf44943', name: "classification", label: "Business Classification", options: businessClassificationOptions, defaultValue: coreInfoDefaultValue.classification, errorText: this.errors.classification, inputHandler: this.inputHandler })), h("div", { key: '88c72bf4401345def76beff2f555f8dcd04724a5', class: "col-12 col-md-4" }, h("form-control-date", { key: '6c8b11e80c6959f257ed9a1022d6f0bc9437cf79', name: "date_of_incorporation", label: "Date of Incorporation", defaultValue: coreInfoDefaultValue.date_of_incorporation, errorText: this.errors.date_of_incorporation, inputHandler: this.inputHandler })), h("div", { key: 'f5ddb61e0b705a4c16a0ae2b4610a6407cc4d919', class: "col-12 col-md-6" }, h("form-control-text", { key: '8e816266819351742ec3a00683a211d3b9ed5969', name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, errorText: this.errors.industry, inputHandler: this.inputHandler })), h("div", { key: '0e23adafca4f1dbde3a40d5f28a84278a00ef5df', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '143ad2c24b1643532186d0bbb4a0f4ada84cc880', name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, errorText: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { key: '3549c796c3c9653e2006f7441a3aedff5c559660', class: "col-12" }, h("form-control-text", { key: 'ae1794226a4aeffdc0ec0ae1a1959a7e1f599024', name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, errorText: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { key: 'a10bae7797bdc5c0bad910281dba1006dcf336b7', class: "col-12 col-md-6" }, h("form-control-text", { key: 'f6c80857ae53d6949d9276d4df3d04e459300c5f', name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'd680203bd386b10a8385bf50d2b7a8e5a5564e29', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'ca47e1b1d774b1fd61242ddd8d8adbeb21576970', name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
+        return (h(Host, { key: '0a54d6f8c056defa8cabdb4dc179c163221da666' }, h("fieldset", { key: '4b0c98edb14fd99bdc1b69452f46176d13138521' }, h("legend", { key: 'ffa4420337c8c0007ea50ed903c2708fcda98027', part: heading2 }, "General Info"), h("div", { key: '2e81c755b2f5b8dc881dfac4bb0cb5c61efef68c', class: "row gy-3" }, h("div", { key: '02cd06cd22a47c19fe0f7ef56332946383c8fb09', class: "col-12" }, h("form-control-text", { key: '9eb76d9b46ca559acc02bd74146249c2d3b75032', name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, errorText: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { key: '6b3e5d12395548523ec27109b3498e17d160ebb5', class: "col-12" }, h("form-control-text", { key: '8ce4c6867f5ca0842b925448196eaae1299663de', name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, errorText: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { key: 'b66a589959a2ac7095ab87b9d123e79ed31588ab', class: "col-12 col-md-8" }, h("form-control-select", { key: '1ace9df2d442f1fc9411fba5c4f549a3d94f3e04', name: "classification", label: "Business Classification", options: businessClassificationOptions, defaultValue: coreInfoDefaultValue.classification, errorText: this.errors.classification, inputHandler: this.inputHandler })), h("div", { key: '008b69ab22ea29d8555db618734910de2a5d5740', class: "col-12 col-md-4" }, h("form-control-date", { key: '19d75c0375ae52cdf139024aff14d9d8911f7ec3', name: "date_of_incorporation", label: "Date of Incorporation", defaultValue: coreInfoDefaultValue.date_of_incorporation, errorText: this.errors.date_of_incorporation, inputHandler: this.inputHandler })), h("div", { key: 'dfa1903977fb2d0f2c7bbc8b990ab67d2040e9b1', class: "col-12 col-md-6" }, h("form-control-text", { key: 'fd7d05bd1401f86eb45b8c647d54714e14f2190a', name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, errorText: this.errors.industry, inputHandler: this.inputHandler })), h("div", { key: 'ae9e24843b6909b288553ec54f99c577b5931417', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'a19f2126f9b24d2fb14a5887a8f83b548f36f4ad', name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, errorText: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { key: '029aaf6b714d7a0e1240176fe43e9c7d80e256bf', class: "col-12" }, h("form-control-text", { key: 'a81b306b6ab4bbe5bd1aa67ff10a2fd1e9bf092e', name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, errorText: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { key: '408bc1916656193648b306cad6b3f6bd343ffc3b', class: "col-12 col-md-6" }, h("form-control-text", { key: 'd15350befa68b8125c0d292e6ffe7d2a09af5590', name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '5835a78ff6cd8e08b364e4d0016df0fdffaa2fb6', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '4a8507cd54812937df751f69b90cc1d3df503de6', name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
     }
 }, [0, "justifi-business-core-info", {
         "formController": [16],

package/dist/module/business-document-upload-form-step.js

@@ -1,8 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as create$3, F as FormController } from './form.js';
 import { a as Business } from './Business.js';
-import { A as Api } from './Api.js';
-import { c as config } from './config.js';
+import { A as Api, c as config } from './config.js';
 import { B as voidedCheckValidation, C as governmentIdValidation, D as ss4Validation, E as otherDocumentValidation, F as balanceSheetValidation, G as bankStatementValidation, H as profitAndLossStatementValidation } from './schema-validations.js';
 import { a as EntityDocument, b as EntityDocumentStorage } from './Document.js';
 import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
@@ -215,7 +214,7 @@ const BusinessDocumentFormStep = /*@__PURE__*/ proxyCustomElement(class Business
         return (h("justifi-business-document-upload-input-group", { paymentVolume: this.paymentVolume, inputHandler: this.inputHandler, storeFiles: this.storeFiles, errors: this.errors }));
     }
     render() {
-        return (h("form", { key: '0d59a81a25ce1b983e1cc1e076072fc60f277829' }, h("fieldset", { key: '806183bf7a2b7bd49f11be8f8e66685360b392d8' }, h("div", { key: '22e1914c580e90acbf0cc295ed878c2f4d3cb12f', class: "d-flex align-items-center gap-2" }, h("legend", { key: '88369a06ab43a76c477a6af93672364fd101a7d2', class: "mb-0", part: heading2 }, "Document Uploads"), h("form-control-tooltip", { key: 'ccbff3cea2f17156a358a82de3e5e8afa87e2ab5', helpText: "Various file formats such as PDF, DOC, DOCX, JPEG, and others are accepted. Multiple files can be uploaded for each document category." })), h("hr", { key: 'e99c7eba9c7605244bee06ae4c0fa4954cafb99a', class: "mt-2" }), this.documentsOnFile, h("div", { key: 'ddbeda2a9740d2a20becde70f5f8113e4a327dc7', class: "d-flex flex-column" }, this.formInputs))));
+        return (h("form", { key: '38a3eb1b9bdde8e315d1c37247e7ad842a3f29c5' }, h("fieldset", { key: 'c3708b2869316632a04e73a4fcf192458f052563' }, h("div", { key: '8e12a5cb1bdc5b70913e8188ae7a9df8e8db7da9', class: "d-flex align-items-center gap-2" }, h("legend", { key: 'b4780b4cacb48d63a07329aff4e2ef5bd0f5a636', class: "mb-0", part: heading2 }, "Document Uploads"), h("form-control-tooltip", { key: '48a7dcc864c87171ab9e6dcafd7edeb20383bb2d', helpText: "Various file formats such as PDF, DOC, DOCX, JPEG, and others are accepted. Multiple files can be uploaded for each document category." })), h("hr", { key: '2e8c855ec6970e6368521970912ff1ce8c2d9bc0', class: "mt-2" }), this.documentsOnFile, h("div", { key: 'cf9026e49cd1e954d37fc3ff01770b6d2be4095a', class: "d-flex flex-column" }, this.formInputs))));
     }
 }, [0, "justifi-business-document-upload-form-step", {
         "authToken": [1, "auth-token"],

package/dist/module/business-document-upload-input-group.js

@@ -87,7 +87,7 @@ const BusinessDocumentUploadInputGroup = /*@__PURE__*/ proxyCustomElement(class
     }
     render() {
         const inputsConfig = this.inputConfigs;
-        return (h("div", { key: '875e19e33818ff3582a274b75c78301fa799a81b', class: "row gy-3" }, inputsConfig.map(config => (h("div", { class: "col-12 col-md-6" }, h("form-control-file", { name: config.name, label: config.label, helpText: config.helpText, documentType: config.documentType, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors[config.name], multiple: true }))))));
+        return (h("div", { key: 'f3ea3130fa1877be47f8a29e248387c2921f4659', class: "row gy-3" }, inputsConfig.map(config => (h("div", { class: "col-12 col-md-6" }, h("form-control-file", { name: config.name, label: config.label, helpText: config.helpText, documentType: config.documentType, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors[config.name], multiple: true }))))));
     }
 }, [0, "justifi-business-document-upload-input-group", {
         "paymentVolume": [1, "payment-volume"],

package/dist/module/business-documents-on-file.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { s as snakeCaseToHumanReadable, a as formatDate, g as formatTimeSeconds } from './utils2.js';
-import { K as card, h as heading2, j as table, f as tableHeadCell, k as tableCell } from './parts.js';
+import { V as card, h as heading2, o as table, m as tableHeadCell, p as tableCell } from './parts.js';
 
 const BusinessDocumentsOnFile = /*@__PURE__*/ proxyCustomElement(class BusinessDocumentsOnFile extends HTMLElement {
     constructor() {

package/dist/module/business-form-options.js

@@ -87,4 +87,4 @@ const bankAccountTypeOptions = [
     }
 ];
 
-export { businessClassificationOptions as a, businessServiceReceivedOptions as b, bankAccountTypeOptions as c, recurringPaymentsOptions as r, seasonalBusinessOptions as s };
+export { businessServiceReceivedOptions as a, businessClassificationOptions as b, bankAccountTypeOptions as c, recurringPaymentsOptions as r, seasonalBusinessOptions as s };

package/dist/module/business-owners-form-step-core.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { B as Button } from './button.js';
 import { h as heading2 } from './parts.js';
 import './details.js';
+import { P as PaymentProvisioningLoading } from './payment-provisioning-loading.js';
 import { B as BusinessFormStep, a as BusinessFormClickActions } from './event-types2.js';
 import { d as defineCustomElement$a } from './custom-popper2.js';
 import { d as defineCustomElement$9 } from './form-control-date2.js';
@@ -30,6 +31,7 @@ const BusinessOwnersFormStepCore = /*@__PURE__*/ proxyCustomElement(class Busine
         };
         this.getData = () => {
             this.formLoading.emit(true);
+            this.isLoading = true;
             this.getBusiness({
                 onSuccess: (response) => {
                     if (response.data.owners.length) {
@@ -48,6 +50,7 @@ const BusinessOwnersFormStepCore = /*@__PURE__*/ proxyCustomElement(class Busine
                 },
                 final: () => {
                     this.formLoading.emit(false);
+                    this.isLoading = false;
                     this.manageRefs();
                 }
             });
@@ -87,6 +90,7 @@ const BusinessOwnersFormStepCore = /*@__PURE__*/ proxyCustomElement(class Busine
         this.ownersPayload = [];
         this.refs = [];
         this.newFormOpen = undefined;
+        this.isLoading = false;
         this.authToken = undefined;
         this.businessId = undefined;
         this.getBusiness = undefined;
@@ -130,9 +134,12 @@ const BusinessOwnersFormStepCore = /*@__PURE__*/ proxyCustomElement(class Busine
         this.ownersPayload = updatedOwners;
     }
     render() {
-        return (h("div", { key: '2b9c3e771b358313862c7491b137a290d1bb6d1c' }, h("div", { key: '8d82eb26425e7932576ee75682e55a8f1fe7fe0d', class: "d-flex align-items-center gap-2" }, h("legend", { key: '87a58eee2b0bea9dc9a721e5cf50f2e6e16e2a82', class: "mb-0", part: heading2 }, "Owners"), h("form-control-tooltip", { key: 'cbfbc58f3a8176f36a0ce985fda4c1606669f537', helpText: "For partnerships, LLCs or privately held corporations, the business is required to apply with all individuals with 25% or more ownership to the application. For charities and registered non-profits, the business is required to apply with 1 individual with substantial control over the entity, such as a board member or director." })), h("hr", { key: '2fabca9671c7ae430b8908311b64184b63862fd3', class: "mt-2" }), h("div", { key: '0df73aba03d9666003cce40d63faa2c0edfd6f3e', class: 'row gy-3' }, this.ownersPayload.map((owner) => {
+        if (this.isLoading) {
+            return h(PaymentProvisioningLoading, null);
+        }
+        return (h("div", null, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Owners"), h("form-control-tooltip", { helpText: "For partnerships, LLCs or privately held corporations, the business is required to apply with all individuals with 25% or more ownership to the application. For charities and registered non-profits, the business is required to apply with 1 individual with substantial control over the entity, such as a board member or director." })), h("hr", { class: "mt-2" }), h("div", { class: 'row gy-3' }, this.ownersPayload.map((owner) => {
             return (h("justifi-owner-form", { key: owner.id, authToken: this.authToken, businessId: this.businessId, ownerId: owner.id, removeOwner: this.removeOwnerForm, newFormOpen: this.newFormOpen, ownersLength: this.ownersPayload.length, allowOptionalFields: this.allowOptionalFields, ref: (ref) => this.matchRef(ref, owner.id) }));
-        })), h("div", { key: '98bfc9f0ac8ec9048edd9bf62a6b0db87c250dc4', class: 'd-flex justify-content-start' }, h("div", { key: 'd6269cfd690b8fe5fcdef9de5e8a60354008261b', class: 'gap-2' }, h(Button, { key: '8d959af4bc6e475d265e5fbd356ad2f1ba06cd77', variant: 'primary', onClick: () => this.addOwnerForm(true), hidden: !this.showAddOwnerButton }, "Add Owner")))));
+        })), h("div", { class: 'd-flex justify-content-start' }, h("div", { class: 'gap-2' }, h(Button, { variant: 'primary', onClick: () => this.addOwnerForm(true), hidden: !this.showAddOwnerButton }, "Add Owner")))));
     }
     static get watchers() { return {
         "ownersPayload": ["ownersWatcher"]
@@ -146,6 +153,7 @@ const BusinessOwnersFormStepCore = /*@__PURE__*/ proxyCustomElement(class Busine
         "ownersPayload": [32],
         "refs": [32],
         "newFormOpen": [32],
+        "isLoading": [32],
         "validateAndSubmit": [64]
     }, [[0, "ownerSubmitted", "handleOwnerSubmit"]], {
         "ownersPayload": ["ownersWatcher"]

package/dist/module/business-owners-form-step.js

@@ -56,7 +56,7 @@ const BusinessOwnersFormStep = /*@__PURE__*/ proxyCustomElement(class BusinessOw
         }
     }
     render() {
-        return (h(Host, { key: '2f5256be2313b3916c1f0d7a69d2b27b305cf66c' }, h("justifi-business-owners-form-step-core", { key: '2c8d3c4cb731b3cf58cf1cc71df2a52c72f660cc', authToken: this.authToken, businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: (el) => this.coreComponent = el })));
+        return (h(Host, { key: 'a4289542dcf53a2be9c2faea5873a36894a2e250' }, h("justifi-business-owners-form-step-core", { key: 'cd40a3cb35d657223516c91217ca3241701dcc8f', authToken: this.authToken, businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: (el) => this.coreComponent = el })));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],

package/dist/module/business-representative-form-inputs.js

@@ -26,7 +26,7 @@ const RepresentativeFormInputs = /*@__PURE__*/ proxyCustomElement(class Represen
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h("form", { key: '0995ea70a1732744cf159fc59a0e4aa8d9f37c1c' }, h("fieldset", { key: '0186de6a306858075d58a32af6a36d07c0b7ae39' }, h("div", { key: '70c643b23570551f0c82df144cdba8020a89c9ef', class: "d-flex align-items-center gap-2" }, h("legend", { key: 'fec6925b259580935a526a79428f9b0a7f1f4d65', class: "mb-0", part: heading2 }, "Representative"), h("form-control-tooltip", { key: '45e3af519e4ad082fcef1ab14b1c66decfd1b2ba', helpText: "The representative for your business needs to be someone who has significant control over managing your business\u2019s finance. You will have an opportunity to add owners later in the form." })), h("hr", { key: 'b55f8129932bfbdba4d010c60931b188a7d88c57', class: "mt-2" }), h("div", { key: '2b8b87ebd71763798127aece44a91c8143612458', class: "row gy-3" }, h("div", { key: '27310ee20317a0fa977bc623bd6fa16fb1e9387a', class: "col-12 col-md-8" }, h("form-control-text", { key: 'ae638a4e2c13e5e1319eb316290ce3116244174c', name: "name", label: "Full Name", defaultValue: (_a = this.representativeDefaultValue) === null || _a === void 0 ? void 0 : _a.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '864731a0668a86ce3fa85911b0c97e5db8878d08', class: "col-12 col-md-4" }, h("form-control-text", { key: '8f07886343469e5a054f49dfd01de4f9913f42f4', name: "title", label: "Title", defaultValue: (_b = this.representativeDefaultValue) === null || _b === void 0 ? void 0 : _b.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: '0efff4560cd543839a364b0b769f1b1f71163b66', class: "col-12 col-md-6" }, h("form-control-text", { key: '11f738a73989ce789770b36ce1d437d53aa53e07', name: "email", label: "Email Address", defaultValue: (_c = this.representativeDefaultValue) === null || _c === void 0 ? void 0 : _c.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'aedf826b2e02f5bdd403451ed47051e1077fe65e', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'ea237c5c3772e8bfeea31995ab0eac23014bd0fd', name: "phone", label: "Phone Number", defaultValue: (_d = this.representativeDefaultValue) === null || _d === void 0 ? void 0 : _d.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '286a392a94ed5e9a9fe175116d835952cd565947', class: "col-12 col-md-4" }, h("form-control-date", { key: 'f0c5dde29769188f7d5ccc06360f69918a8bae5e', name: "dob_full", label: "Birth Date", defaultValue: (_e = this.representativeDefaultValue) === null || _e === void 0 ? void 0 : _e.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: '1326dd00d94fe8feec7ca411689370a747709eec', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: '5b084d36a3be5b58534169076f34282a3d8565ac', name: "identification_number", label: "SSN", defaultValue: (_f = this.representativeDefaultValue) === null || _f === void 0 ? void 0 : _f.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK, helpText: "Enter your full Social Security Number. It is required for Federal OFAC check." })), h("div", { key: 'c0ca035fd4ff10f9529be1ff6c28f8c4479c95b1', class: "col-12" }, h("justifi-identity-address-form", { key: '1f9e30e790dc3facd5590492a99490e06d74c17a', errors: this.errors.address, defaultValues: (_g = this.representativeDefaultValue) === null || _g === void 0 ? void 0 : _g.address, handleFormUpdate: this.onAddressFormUpdate }))))));
+        return (h("form", { key: '90775954aebfc23b163d3b1626de290b70a4b32c' }, h("fieldset", { key: 'ea79bf2618b504fd7a5b86f334aace2d9fb20681' }, h("div", { key: '3b0ec861e82a1fb35dee68a81655506c198686d4', class: "d-flex align-items-center gap-2" }, h("legend", { key: '613e036d03c20ffc6e51a6a89f38eda7b2440e67', class: "mb-0", part: heading2 }, "Representative"), h("form-control-tooltip", { key: 'ba37c309f9f25b697f297c9641767d800e284f9f', helpText: "The representative for your business needs to be someone who has significant control over managing your business\u2019s finance. You will have an opportunity to add owners later in the form." })), h("hr", { key: '8c3b56e7481e7c67a9e4f56fb2406506d6a3f927', class: "mt-2" }), h("div", { key: '477b3938ea0011e67bba2c43406b9dbb14019caf', class: "row gy-3" }, h("div", { key: 'dd2eca835cb422bd0f38fd504da1d651d5914d89', class: "col-12 col-md-8" }, h("form-control-text", { key: '477719029d827ddff5d2e357d641eb2d8b697657', name: "name", label: "Full Name", defaultValue: (_a = this.representativeDefaultValue) === null || _a === void 0 ? void 0 : _a.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '36d22fa160f31c538e5afb80fa7fd6533caae3d3', class: "col-12 col-md-4" }, h("form-control-text", { key: '9d87128ec44af7cb861be3b3bf9705172267a2db', name: "title", label: "Title", defaultValue: (_b = this.representativeDefaultValue) === null || _b === void 0 ? void 0 : _b.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: '88b158cae25138f1e930f16d72972767679f9f27', class: "col-12 col-md-6" }, h("form-control-text", { key: 'dbd4ee0f36136c17aa96c36ca1fd0d8ed66758b4', name: "email", label: "Email Address", defaultValue: (_c = this.representativeDefaultValue) === null || _c === void 0 ? void 0 : _c.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '11f873b4275b150459c482264ed364e8970f70ca', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '39763eb1b0c981f525b81c5d0fc0fb2fb44cce5c', name: "phone", label: "Phone Number", defaultValue: (_d = this.representativeDefaultValue) === null || _d === void 0 ? void 0 : _d.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '6f7e70e31c03564c989355f9ed40b839451b3ae2', class: "col-12 col-md-4" }, h("form-control-date", { key: 'e5ee8b0752707fdafa4b6b7a8973f5b66f21bce6', name: "dob_full", label: "Birth Date", defaultValue: (_e = this.representativeDefaultValue) === null || _e === void 0 ? void 0 : _e.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: '73d54b1618e625fd67da896645edf74000596192', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: 'ce5235878fc1554e573e86070502a7ebaf4f2544', name: "identification_number", label: "SSN", defaultValue: (_f = this.representativeDefaultValue) === null || _f === void 0 ? void 0 : _f.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK, helpText: "Enter your full Social Security Number. It is required for Federal OFAC check." })), h("div", { key: '521ebc9a53fb0b2591937e75d6ca6789c134d54f', class: "col-12" }, h("justifi-identity-address-form", { key: '69d66df1033b67ce2e2fe7ae44ab7adfb38cc3d8', errors: this.errors.address, defaultValues: (_g = this.representativeDefaultValue) === null || _g === void 0 ? void 0 : _g.address, handleFormUpdate: this.onAddressFormUpdate }))))));
     }
 }, [0, "justifi-business-representative-form-inputs", {
         "representativeDefaultValue": [8, "representative-default-value"],

package/dist/module/business-representative-form-step-core.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { R as Representative } from './Business.js';
 import { F as FormController } from './form.js';
 import { i as identitySchema } from './business-identity-schema.js';
+import { P as PaymentProvisioningLoading } from './payment-provisioning-loading.js';
 import { B as BusinessFormStep } from './event-types2.js';
 import { d as defineCustomElement$8 } from './custom-popper2.js';
 import { d as defineCustomElement$7 } from './form-control-date2.js';
@@ -21,6 +22,7 @@ const BusinessRepresentativeFormStepCore = /*@__PURE__*/ proxyCustomElement(clas
         this.formLoading = createEvent(this, "formLoading", 7);
         this.getData = () => {
             this.formLoading.emit(true);
+            this.isLoading = true;
             this.getBusiness({
                 onSuccess: (response) => {
                     this.representative = new Representative(response.data.representative || {});
@@ -33,7 +35,10 @@ const BusinessRepresentativeFormStepCore = /*@__PURE__*/ proxyCustomElement(clas
                         severity: severity
                     });
                 },
-                final: () => this.formLoading.emit(false)
+                final: () => {
+                    this.formLoading.emit(false);
+                    this.isLoading = false;
+                }
             });
         };
         this.sendData = (onSuccess) => {
@@ -62,6 +67,7 @@ const BusinessRepresentativeFormStepCore = /*@__PURE__*/ proxyCustomElement(clas
         this.formController = undefined;
         this.errors = {};
         this.representative = {};
+        this.isLoading = false;
         this.getBusiness = undefined;
         this.patchBusiness = undefined;
         this.allowOptionalFields = undefined;
@@ -83,7 +89,10 @@ const BusinessRepresentativeFormStepCore = /*@__PURE__*/ proxyCustomElement(clas
         });
     }
     render() {
-        return (h("justifi-business-representative-form-inputs", { key: 'bc90362d5ed774196cea5d259211d8099f918522', representativeDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController }));
+        if (this.isLoading) {
+            return (h(PaymentProvisioningLoading, null));
+        }
+        return (h("justifi-business-representative-form-inputs", { representativeDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController }));
     }
 }, [0, "justifi-business-representative-form-step-core", {
         "getBusiness": [16],
@@ -92,6 +101,7 @@ const BusinessRepresentativeFormStepCore = /*@__PURE__*/ proxyCustomElement(clas
         "formController": [32],
         "errors": [32],
         "representative": [32],
+        "isLoading": [32],
         "validateAndSubmit": [64]
     }]);
 function defineCustomElement() {

package/dist/module/business-representative-form-step.js

@@ -54,7 +54,7 @@ const BusinessRepresentativeFormStep = /*@__PURE__*/ proxyCustomElement(class Bu
         }
     }
     render() {
-        return (h("justifi-business-representative-form-step-core", { key: '24461e0acb80a0161fb796c3ee35f511601f707e', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-business-representative-form-step-core", { key: 'ef66ed41f635a4676073073db924050f548c9781', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],