@justifi/webcomponents 5.2.0 → 5.3.1

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

@@ -1,35 +1,25 @@
 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 { g as bankNameValidation, n as nicknameValidation, i as identityNameValidation, h as accountTypeValidation, j as accountNumberValidation, k as routingNumberValidation, v as voidedCheckValidation, m as bankStatementValidation } from './schema-validations.js';
+import './Business.js';
+import { B as BusinessFormStep } from './event-types.js';
 import { h as heading2 } from './parts.js';
-import { d as defineCustomElement$4 } from './custom-popper2.js';
+import { P as PaymentProvisioningLoading } from './payment-provisioning-loading.js';
+import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
+import './Checkout.js';
+import './Pagination.js';
+import './Payment.js';
+import './SubAccount.js';
+import { a as EntityDocument, b as EntityDocumentStorage } from './Document.js';
+import { d as defineCustomElement$8 } from './bank-account-document-inputs.js';
+import { d as defineCustomElement$7 } from './bank-account-form-inputs2.js';
+import { d as defineCustomElement$6 } from './business-documents-on-file2.js';
+import { d as defineCustomElement$5 } from './custom-popper2.js';
+import { d as defineCustomElement$4 } from './form-control-file2.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;
@@ -63,6 +53,30 @@ class BankAccount {
     }
 }
 
+const businessBankAccountSchema = (documents, 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'),
+        voided_check: voidedCheckValidation(documents, allowOptionalFields),
+        bank_statement: bankStatementValidation(documents, allowOptionalFields)
+    });
+    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(),
+        voided_check: voidedCheckValidation(documents, allowOptionalFields),
+        bank_statement: bankStatementValidation(documents, allowOptionalFields)
+    });
+    return allowOptionalFields ? easySchema : schema;
+};
+
 const BusinessBankAccountFormStepCore = /*@__PURE__*/ proxyCustomElement(class BusinessBankAccountFormStepCore extends HTMLElement {
     constructor() {
         super();
@@ -70,8 +84,24 @@ const BusinessBankAccountFormStepCore = /*@__PURE__*/ proxyCustomElement(class B
         this.stepCompleteEvent = createEvent(this, "complete-form-step-event", 7);
         this.errorEvent = createEvent(this, "error-event", 7);
         this.formLoading = createEvent(this, "formLoading", 7);
+        this.initializeFormController = () => {
+            this.formController = new FormController(businessBankAccountSchema(this.existingDocuments, this.allowOptionalFields));
+            this.formController.setInitialValues(Object.assign({}, this.bankAccount));
+            this.formController.errors.subscribe(errors => {
+                this.errors = Object.assign({}, errors);
+            });
+        };
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+        this.storeFiles = (e) => {
+            const fileList = Array.from(e.detail.fileList);
+            const docType = e.detail.document_type;
+            const documentList = fileList.map(file => new EntityDocument({ file, document_type: docType }, this.businessId));
+            this.documentData[docType] = documentList;
+        };
         this.getData = () => {
-            this.formLoading.emit(true);
+            this.isLoading = true;
             this.getBusiness({
                 onSuccess: (response) => {
                     if (response.data.bank_accounts.length > 0) {
@@ -81,29 +111,9 @@ const BusinessBankAccountFormStepCore = /*@__PURE__*/ proxyCustomElement(class B
                         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();
+                    this.existingDocuments = response.data.documents;
                 },
                 onError: ({ error, code, severity }) => {
-                    submittedData = error;
                     this.errorEvent.emit({
                         message: error,
                         errorCode: code,
@@ -111,75 +121,240 @@ const BusinessBankAccountFormStepCore = /*@__PURE__*/ proxyCustomElement(class B
                     });
                 },
                 final: () => {
-                    this.stepCompleteEvent.emit({ response: submittedData, formStep: BusinessFormStep.bankAccount });
-                    this.formLoading.emit(false);
+                    this.initializeFormController();
+                    this.isLoading = false;
                 }
             });
         };
-        this.inputHandler = (name, value) => {
-            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        this.postDocumentRecordData = async (docData) => {
+            this.isLoading = true;
+            const payload = docData.record_data;
+            return new Promise((resolve) => {
+                this.postDocumentRecord({
+                    payload,
+                    onSuccess: (response) => {
+                        resolve(this.handleDocRecordResponse(docData, response));
+                    },
+                    onError: ({ error, code, severity }) => {
+                        this.errorEvent.emit({
+                            message: error,
+                            errorCode: code,
+                            severity: severity
+                        });
+                        resolve(false);
+                    },
+                });
+            });
+        };
+        this.handleDocRecordResponse = (docData, response) => {
+            if (response.error) {
+                this.errorEvent.emit({
+                    errorCode: ComponentErrorCodes.POST_ERROR,
+                    message: response.error.message,
+                    severity: ComponentErrorSeverity.ERROR,
+                    data: response.error,
+                });
+                return false;
+            }
+            else {
+                docData.setPresignedUrl(response.data.presigned_url);
+                return true;
+            }
+        };
+        this.uploadDocument = async (docData) => {
+            if (!docData.presigned_url) {
+                throw new Error('Presigned URL is not set');
+            }
+            const response = await fetch(docData.presigned_url, {
+                method: 'PUT',
+                body: docData.fileString,
+            });
+            return this.handleUploadResponse(response);
+        };
+        this.handleUploadResponse = (response) => {
+            if (response.error) {
+                this.errorEvent.emit({
+                    errorCode: ComponentErrorCodes.POST_ERROR,
+                    message: response.error.message,
+                    severity: ComponentErrorSeverity.ERROR,
+                    data: response.error,
+                });
+                return false;
+            }
+            else {
+                return true;
+            }
         };
         this.formController = undefined;
         this.errors = {};
         this.bankAccount = {};
+        this.existingDocuments = [];
+        this.documentData = new EntityDocumentStorage();
+        this.isLoading = false;
         this.businessId = undefined;
         this.getBusiness = undefined;
         this.postBankAccount = undefined;
+        this.postDocumentRecord = undefined;
         this.allowOptionalFields = undefined;
     }
+    watchHandler(newValue) {
+        this.formLoading.emit(newValue);
+    }
     async validateAndSubmit({ onSuccess }) {
-        if (this.formDisabled) {
-            this.stepCompleteEvent.emit({ response: null, formStep: BusinessFormStep.bankAccount, metadata: 'no data submitted' });
-            onSuccess();
+        if (this.existingBankAccount) {
+            // If a bank account already exists, skip bank account posting; proceed directly to document upload
+            this.sendData(onSuccess);
         }
         else {
+            // If bank account is new, validate form inputs (bank account fields), then proceed
             this.formController.validateAndSubmit(() => this.sendData(onSuccess));
         }
     }
-    ;
+    componentWillLoad() {
+        this.getBusiness && this.getData();
+        this.formController = new FormController(businessBankAccountSchema(this.existingDocuments, this.allowOptionalFields));
+    }
+    componentDidLoad() {
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
     get postPayload() {
         let formValues = new BankAccount(this.formController.values.getValue()).payload;
         return formValues;
     }
-    get formDisabled() {
+    get existingBankAccount() {
         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));
+    async sendData(onSuccess) {
+        try {
+            //  Post bank account data if the form is not disabled
+            const bankAccountPosted = !this.existingBankAccount ? await this.postBankAccountData() : true;
+            if (!bankAccountPosted) {
+                return;
+            }
+            // Post documents only after bank account was successfully created
+            const documentsUploaded = await this.postBusinessDocuments();
+            if (!documentsUploaded) {
+                return;
+            }
+            onSuccess();
+        }
+        catch (error) {
+            this.errorEvent.emit({
+                message: error,
+                errorCode: ComponentErrorCodes.POST_ERROR,
+                severity: ComponentErrorSeverity.ERROR
+            });
+        }
     }
-    componentDidLoad() {
-        this.formController.errors.subscribe(errors => {
-            this.errors = Object.assign({}, errors);
+    async postBankAccountData() {
+        let submittedData;
+        this.isLoading = true;
+        return new Promise((resolve) => {
+            let success = false;
+            this.postBankAccount({
+                payload: this.postPayload,
+                onSuccess: (response) => {
+                    submittedData = response;
+                    success = true;
+                },
+                onError: ({ error, code, severity }) => {
+                    success = false;
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity: severity
+                    });
+                },
+                final: () => {
+                    this.stepCompleteEvent.emit({ response: submittedData, formStep: BusinessFormStep.bankAccount });
+                    this.isLoading = false;
+                    resolve(success);
+                }
+            });
         });
     }
+    async postBusinessDocuments() {
+        this.isLoading = true;
+        try {
+            const docArray = Object.values(this.documentData).flat();
+            if (!docArray.length) {
+                return true;
+            }
+            const recordsCreated = await Promise.all(docArray.map((docData) => this.postDocumentRecordData(docData))); // Create document records
+            if (recordsCreated.includes(false)) {
+                return false;
+            } // Exit if document record creation fails
+            const uploadsCompleted = await Promise.all(docArray.map((docData) => this.uploadDocument(docData))); // Upload documents to AWS presigned URLs
+            if (uploadsCompleted.includes(false)) {
+                return false;
+            } // Exit if any upload fails
+            return true;
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
     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." }))))));
+        if (this.isLoading) {
+            return h(PaymentProvisioningLoading, null);
+        }
+        return (h("form", null, h("fieldset", { class: "mb-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Bank Account Info"), h("form-control-tooltip", { helpText: "This direct deposit account is the designated bank account where incoming 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", { class: "mt-2" }), h("bank-account-form-inputs", { defaultValue: bankAccountDefaultValue, errors: this.errors, inputHandler: this.inputHandler, formDisabled: this.existingBankAccount })), h("fieldset", { class: "mt-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Document Uploads"), h("form-control-tooltip", { helpText: "These documents are required for underwriting purposes. Various file formats such as PDF, DOC, DOCX, JPEG, and others are accepted. Multiple files can be uploaded for each document category." })), h("hr", { class: "mt-2" }), h("business-documents-on-file", { documents: this.existingDocuments, isLoading: this.isLoading }), h("bank-account-document-form-inputs", { inputHandler: this.inputHandler, errors: this.errors, storeFiles: this.storeFiles }))));
     }
+    static get watchers() { return {
+        "isLoading": ["watchHandler"]
+    }; }
 }, [0, "justifi-business-bank-account-form-step-core", {
         "businessId": [1, "business-id"],
         "getBusiness": [16],
         "postBankAccount": [16],
+        "postDocumentRecord": [16],
         "allowOptionalFields": [4, "allow-optional-fields"],
         "formController": [32],
         "errors": [32],
         "bankAccount": [32],
+        "existingDocuments": [32],
+        "documentData": [32],
+        "isLoading": [32],
         "validateAndSubmit": [64]
+    }, undefined, {
+        "isLoading": ["watchHandler"]
     }]);
 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"];
+    const components = ["justifi-business-bank-account-form-step-core", "bank-account-document-form-inputs", "bank-account-form-inputs", "business-documents-on-file", "custom-popper", "form-control-file", "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 "bank-account-document-form-inputs":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "bank-account-form-inputs":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "business-documents-on-file":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
         case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "form-control-file":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

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

@@ -1,8 +1,17 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { C as ComponentErrorCodes, a as ComponentErrorSeverity } from './ComponentError.js';
-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 './Checkout.js';
+import './Pagination.js';
+import './Payment.js';
+import './SubAccount.js';
+import './Document.js';
+import { m as makeGetBusiness, b as makePostBankAccount, c as makePostDocumentRecord } from './payment-provisioning-actions.js';
+import { B as BusinessService, a as BusinessBankAccountService, D as DocumentRecordService } from './business.service.js';
+import { d as defineCustomElement$9 } from './bank-account-document-inputs.js';
+import { d as defineCustomElement$8 } from './bank-account-form-inputs2.js';
+import { d as defineCustomElement$7 } from './business-documents-on-file2.js';
+import { d as defineCustomElement$6 } from './custom-popper2.js';
+import { d as defineCustomElement$5 } from './form-control-file2.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';
@@ -15,6 +24,8 @@ const BusinessBankAccountFormStep = /*@__PURE__*/ proxyCustomElement(class Busin
         this.errorEvent = createEvent(this, "error-event", 7);
         this.getBusiness = undefined;
         this.postBankAccount = undefined;
+        this.postDocumentRecord = undefined;
+        this.postDocument = undefined;
         this.authToken = undefined;
         this.businessId = undefined;
         this.allowOptionalFields = undefined;
@@ -39,6 +50,10 @@ const BusinessBankAccountFormStep = /*@__PURE__*/ proxyCustomElement(class Busin
                 authToken: this.authToken,
                 service: new BusinessBankAccountService()
             });
+            this.postDocumentRecord = makePostDocumentRecord({
+                authToken: this.authToken,
+                service: new DocumentRecordService()
+            });
         }
         else {
             this.errorEvent.emit({
@@ -49,7 +64,7 @@ const BusinessBankAccountFormStep = /*@__PURE__*/ proxyCustomElement(class Busin
         }
     }
     render() {
-        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 }));
+        return (h("justifi-business-bank-account-form-step-core", { key: 'e60dff98e072aeb0eb351cd746c9c05e0adf903c', businessId: this.businessId, getBusiness: this.getBusiness, postBankAccount: this.postBankAccount, postDocumentRecord: this.postDocumentRecord, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
@@ -61,6 +76,8 @@ const BusinessBankAccountFormStep = /*@__PURE__*/ proxyCustomElement(class Busin
         "allowOptionalFields": [4, "allow-optional-fields"],
         "getBusiness": [32],
         "postBankAccount": [32],
+        "postDocumentRecord": [32],
+        "postDocument": [32],
         "validateAndSubmit": [64]
     }, undefined, {
         "authToken": ["propChanged"],
@@ -70,14 +87,34 @@ 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", "justifi-business-bank-account-form-step-core"];
+    const components = ["justifi-business-bank-account-form-step", "bank-account-document-form-inputs", "bank-account-form-inputs", "business-documents-on-file", "custom-popper", "form-control-file", "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)) {
                 customElements.define(tagName, BusinessBankAccountFormStep);
             }
             break;
+        case "bank-account-document-form-inputs":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "bank-account-form-inputs":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "business-documents-on-file":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
         case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "form-control-file":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

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

@@ -2,8 +2,8 @@ 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 { b as businessClassificationOptions } from './business-form-options.js';
-import { B as BusinessFormStep } from './event-types2.js';
+import { a as businessClassificationOptions } from './business-form-options.js';
+import { B as BusinessFormStep } from './event-types.js';
 import { P as PHONE_MASKS } from './form-input-masks.js';
 import { n as numberOnlyHandler } from './utils3.js';
 import { h as heading2 } from './parts.js';

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: '2262521f98ad949fa2558572a991b00b44a2c8c0', 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: 'c9f93be3e48527f5ae799cf736fc9ca86ece736c', 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-schema.js

@@ -1,5 +1,5 @@
 import { c as create$3 } from './form.js';
-import { m as businessNameValidation, q as websiteUrlValidation, t as emailValidation, u as phoneValidation, v as doingBusinessAsValidation, x as businessClassificationValidation, y as industryValidation, z as taxIdValidation, A as dateOfIncorporationValidation } from './schema-validations.js';
+import { q as businessNameValidation, t as websiteUrlValidation, u as emailValidation, x as phoneValidation, y as doingBusinessAsValidation, z as businessClassificationValidation, A as industryValidation, B as taxIdValidation, C as dateOfIncorporationValidation } from './schema-validations.js';
 
 const businessCoreInfoSchema = (allowOptionalFields) => {
     const schema = create$3({

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { b as businessClassificationOptions } from './business-form-options.js';
+import { a 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';

package/dist/module/business-documents-on-file.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BusinessDocumentsOnFile extends Components.BusinessDocumentsOnFile, HTMLElement {}
+export const BusinessDocumentsOnFile: {
+    prototype: BusinessDocumentsOnFile;
+    new (): BusinessDocumentsOnFile;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -1,38 +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 { V as card, h as heading2, o as table, m as tableHeadCell, p as tableCell } from './parts.js';
+import { B as BusinessDocumentsOnFile$1, d as defineCustomElement$1 } from './business-documents-on-file2.js';
 
-const BusinessDocumentsOnFile = /*@__PURE__*/ proxyCustomElement(class BusinessDocumentsOnFile extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.documents = [];
-    }
-    render() {
-        if (!this.documents.length) {
-            return null;
-        }
-        return (h(Host, null, h("div", { class: 'card', part: card }, h("div", { class: 'card-body' }, h("h5", { class: 'card-title', part: heading2 }, "Documents Already on File"), h("div", { class: 'table-responsive' }, h("table", { class: 'table table-sm table-borderless', part: table }, h("thead", null, h("tr", null, h("th", { style: { width: '25%' }, part: tableHeadCell, scope: 'col' }, "File Name"), h("th", { style: { width: '25%' }, part: tableHeadCell, scope: 'col' }, "File Type"), h("th", { style: { width: '25%' }, part: tableHeadCell, scope: 'col' }, "Document Type"), h("th", { style: { width: '25%' }, part: tableHeadCell, scope: 'col' }, "Date Uploaded"))), h("tbody", null, this.documents.sort((a, b) => a.document_type.localeCompare(b.document_type))
-            .map((document, index) => {
-            return (h("tr", { class: index === 0 ? 'border-bottom border-top' : 'border-bottom' }, h("td", { part: tableCell }, document.file_name), h("td", { part: tableCell }, document.file_type), h("td", { part: tableCell }, snakeCaseToHumanReadable(document.document_type)), h("td", { part: tableCell }, `${formatDate(document.created_at)} - ${formatTimeSeconds(document.created_at)}`)));
-        })))))), h("hr", null)));
-    }
-}, [0, "justifi-business-documents-on-file", {
-        "documents": [8]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["justifi-business-documents-on-file"];
-    components.forEach(tagName => { switch (tagName) {
-        case "justifi-business-documents-on-file":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, BusinessDocumentsOnFile);
-            }
-            break;
-    } });
-}
-defineCustomElement();
+const BusinessDocumentsOnFile = BusinessDocumentsOnFile$1;
+const defineCustomElement = defineCustomElement$1;
 
-export { BusinessDocumentsOnFile as B, defineCustomElement as d };
+export { BusinessDocumentsOnFile, defineCustomElement };

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

@@ -0,0 +1,45 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as snakeCaseToHumanReadable, b as formatDate, c as formatTimeSeconds } from './utils2.js';
+import { m as card, h as heading2, n as table, o as tableHeadCell, p as tableCell } from './parts.js';
+import { S as Skeleton } from './skeleton.js';
+import './details.js';
+
+const BusinessDocumentsOnFile = /*@__PURE__*/ proxyCustomElement(class BusinessDocumentsOnFile extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.documents = [];
+        this.isLoading = false;
+    }
+    render() {
+        if (this.isLoading) {
+            return h(Skeleton, { height: "50px" });
+        }
+        if (!this.documents.length) {
+            return null;
+        }
+        return (h(Host, null, h("div", { class: "card", part: card }, h("div", { class: "card-body" }, h("h5", { class: "card-title", part: heading2 }, "Documents Already on File"), h("div", { class: "table-responsive" }, h("table", { class: "table table-sm table-borderless", part: table }, h("thead", null, h("tr", null, h("th", { style: { width: "25%" }, part: tableHeadCell, scope: "col" }, "File Name"), h("th", { style: { width: "25%" }, part: tableHeadCell, scope: "col" }, "File Type"), h("th", { style: { width: "25%" }, part: tableHeadCell, scope: "col" }, "Document Type"), h("th", { style: { width: "25%" }, part: tableHeadCell, scope: "col" }, "Date Uploaded"))), h("tbody", null, this.documents.sort((a, b) => a.document_type.localeCompare(b.document_type))
+            .map((document, index) => {
+            return (h("tr", { class: index === 0 ? "border-bottom border-top" : "border-bottom" }, h("td", { part: tableCell }, document.file_name), h("td", { part: tableCell }, document.file_type), h("td", { part: tableCell }, snakeCaseToHumanReadable(document.document_type)), h("td", { part: tableCell }, `${formatDate(document.created_at)} - ${formatTimeSeconds(document.created_at)}`)));
+        })))))), h("hr", null)));
+    }
+}, [0, "business-documents-on-file", {
+        "documents": [8],
+        "isLoading": [4, "is-loading"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["business-documents-on-file"];
+    components.forEach(tagName => { switch (tagName) {
+        case "business-documents-on-file":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BusinessDocumentsOnFile);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BusinessDocumentsOnFile as B, defineCustomElement as d };

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

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