@justifi/webcomponents 5.1.0 → 5.3.0

package/dist/module/additional-statement.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as create$3, a as create$6, F as FormController } from './form.js';
 import { D as DisputeEvidenceDocument, a as DisputeResponseFormStep } from './dispute-response-form-types.js';
-import { S as heading5 } from './parts.js';
+import { T as heading5 } from './parts.js';
 import { d as defineCustomElement$5 } from './custom-popper2.js';
 import { d as defineCustomElement$4 } from './form-control-file-v22.js';
 import { d as defineCustomElement$3 } from './form-control-help-text3.js';
@@ -48,7 +48,7 @@ const AdditionalStatement = /*@__PURE__*/ proxyCustomElement(class AdditionalSta
     }
     render() {
         var _a;
-        return (h("div", { key: '12a083283fd725f7eb50a5c297ef408ea4184e7a' }, h("div", { key: '6f85bc12bac843ffe6ae1e8bd6acc35db250bc1d', class: "row gy-3" }, h("div", { key: '6bb4c2442b9bbfe2689d60a83806bae6ba5e55f6', class: "col-12" }, h("h2", { key: '9a9cff6036ce2da07ee316145bd35c9971cb94ca', class: "h5", part: heading5 }, "Additional Evidence")), h("div", { key: 'ad1e3f5be5c71475e172f1b500435248466972a0', class: "col-12" }, h("form-control-textarea", { key: 'dc41498eeabb42786d08522414fed87b1bb9ff9f', label: "Is there anything else you would like to say about this dispute?", name: "additional_statement", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.additional_statement, inputHandler: this.inputHandler, errorText: this.errors.additional_statement })), h("div", { key: '64560a0ec82808e6f41143ed3e2c2b1f35f7d016', class: "col-12" }, h("form-control-file-v2", { key: '8e6b407436dd6bed4612550b6dbddb61ed3ccdc6', label: "Additional files", name: "uncategorized_file", multiple: true, helpText: "Upload any additional pieces of evidence that have not already been provided.", onChange: this.handleFileSelection })))));
+        return (h("div", { key: 'd0047a4d77bcab83eb40d649bef9143bd0494a29' }, h("div", { key: '6a885d8d42962477a0dc58ff7b726be0c1778fef', class: "row gy-3" }, h("div", { key: '158a7392e846f1521f64d50d6d9f4ef55399882e', class: "col-12" }, h("h2", { key: '4220ccee243d30d512fcf95ae900935f4c738d51', class: "h5", part: heading5 }, "Additional Evidence")), h("div", { key: '777e6f3a129431e612c8fdbfac456ed40c3c068f', class: "col-12" }, h("form-control-textarea", { key: 'b9ca73e48d7797d308136176ddc964f435822b8f', label: "Is there anything else you would like to say about this dispute?", name: "additional_statement", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.additional_statement, inputHandler: this.inputHandler, errorText: this.errors.additional_statement })), h("div", { key: '0eae8623234917330e16a1d0d517bc3b5e369bd9', class: "col-12" }, h("form-control-file-v2", { key: '9888c9848db8f979de5550b52990da71da468806', label: "Additional files", name: "uncategorized_file", multiple: true, helpText: "Upload any additional pieces of evidence that have not already been provided.", onChange: this.handleFileSelection })))));
     }
 }, [0, "justifi-additional-statement", {
         "disputeResponse": [8, "dispute-response"],

package/dist/module/badge.js

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core/internal/client';
-import { x as badge, y as badgePrimary, z as badgeSecondary, A as badgeSuccess, B as badgeDanger, C as badgeWarning, D as badgeInfo, E as badgeLight, F as badgeDark } from './parts.js';
+import { y as badge, z as badgePrimary, A as badgeSecondary, B as badgeSuccess, C as badgeDanger, D as badgeWarning, E as badgeInfo, F as badgeLight, G as badgeDark } from './parts.js';
 
 var BadgeVariant;
 (function (BadgeVariant) {

package/dist/module/bank-account-document-form-inputs.d.ts

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

package/dist/module/bank-account-document-form-inputs.js

@@ -0,0 +1,6 @@
+import { B as BankAccountDocumentFormInputs$1, d as defineCustomElement$1 } from './bank-account-document-inputs.js';
+
+const BankAccountDocumentFormInputs = BankAccountDocumentFormInputs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BankAccountDocumentFormInputs, defineCustomElement };

package/dist/module/bank-account-document-inputs.js

@@ -0,0 +1,58 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import './ComponentError.js';
+import './Checkout.js';
+import './Pagination.js';
+import './Payment.js';
+import './SubAccount.js';
+import { E as EntityDocumentType } from './Document.js';
+import { d as defineCustomElement$3 } from './custom-popper2.js';
+import { d as defineCustomElement$2 } from './form-control-file2.js';
+import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
+
+const BankAccountDocumentFormInputs = /*@__PURE__*/ proxyCustomElement(class BankAccountDocumentFormInputs extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.inputHandler = undefined;
+        this.errors = undefined;
+        this.storeFiles = undefined;
+    }
+    render() {
+        return (h("div", { key: '9e04de8ad0e4a1d83f6d8fd1e5a2a5e92c670b92', class: "row gy-3" }, h("div", { key: 'af8875e58677a94873d548c35e9d2859725058e5', class: "col-12" }, h("form-control-file", { key: '030c461b2c2a3da9acf5fcf761f537ea9f6cfcc9', name: "voided_check", label: "Voided Check", documentType: EntityDocumentType.voidedCheck, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["voided_check"], multiple: true })), h("div", { key: '0b6650097a7c6810d9ab9dc76484b49dfe0c7e11', class: "col-12" }, h("form-control-file", { key: 'cd030043373cc6759022b9c23c674830ceffaff3', name: "bank_statement", label: "Bank Statement", documentType: EntityDocumentType.bankStatement, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["bank_statement"], multiple: true }))));
+    }
+}, [0, "bank-account-document-form-inputs", {
+        "inputHandler": [16],
+        "errors": [8],
+        "storeFiles": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bank-account-document-form-inputs", "custom-popper", "form-control-file", "form-control-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bank-account-document-form-inputs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BankAccountDocumentFormInputs);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-file":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BankAccountDocumentFormInputs as B, defineCustomElement as d };

package/dist/module/bank-account-form-inputs.d.ts

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

package/dist/module/bank-account-form-inputs.js

@@ -0,0 +1,6 @@
+import { B as BankAccountFormInputs$1, d as defineCustomElement$1 } from './bank-account-form-inputs2.js';
+
+const BankAccountFormInputs = BankAccountFormInputs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BankAccountFormInputs, defineCustomElement };

package/dist/module/bank-account-form-inputs2.js

@@ -0,0 +1,63 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { b as bankAccountTypeOptions } from './business-form-options.js';
+import './event-types.js';
+import { n as numberOnlyHandler } from './utils3.js';
+import { d as defineCustomElement$4 } from './custom-popper2.js';
+import { d as defineCustomElement$3 } from './form-control-select2.js';
+import { d as defineCustomElement$2 } from './form-control-text2.js';
+import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
+
+const BankAccountFormInputs = /*@__PURE__*/ proxyCustomElement(class BankAccountFormInputs extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.defaultValue = undefined;
+        this.errors = undefined;
+        this.inputHandler = undefined;
+        this.formDisabled = undefined;
+    }
+    render() {
+        return (h("div", { key: 'c4420b1e4396ac065b3674f52b124c0d25359435', class: "row gy-3" }, h("div", { key: '40e5f2d54a6f60558ec5aa50ff47e6adcf66276b', class: "col-12" }, h("form-control-text", { key: '9052ecb4597ecc96841d65929f1d8e5dbf662343', name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: 'c32bbaf4fe2155f49cb35ee4500016e7f97f24b3', class: "col-12" }, h("form-control-text", { key: '3527553824fb36ea616836bf8e9435fc33a2365a', name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: 'c203663fad98052567b34cbffe316606c963ff23', class: "col-12" }, h("form-control-text", { key: 'db95259c41fa10b6af2cbc4c9bd7340d609312ee', name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '3228e30c418210556e4e9f99f4f87f753876072d', class: "col-12" }, h("form-control-select", { key: '6dde33c0e9a2ac76051e01af836ea372f30d8fbb', name: "account_type", label: "Account Type", options: bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler, disabled: this.formDisabled })), h("div", { key: '266005f1bba23068fc0be35416f5fd8cf3fc7c7c', class: "col-12" }, h("form-control-text", { key: '34caa85c53b457de98a524a2eb151899e5bcf21a', name: "account_number", label: "Account Number", defaultValue: this.defaultValue.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: '69d2e72cf588518e4fe310c2ad5cb37c72fab8c6', class: "col-12" }, h("form-control-text", { key: 'bc4353e36c9d982aa55f5e933975c4020c316ad0', name: "routing_number", label: "Routing Number", defaultValue: this.defaultValue.routing_number, maxLength: 9, errorText: this.errors.routing_number, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, disabled: this.formDisabled, helpText: "A valid routing number is nine digits. Please include any leading or trailing zeroes." }))));
+    }
+}, [0, "bank-account-form-inputs", {
+        "defaultValue": [8, "default-value"],
+        "errors": [8],
+        "inputHandler": [16],
+        "formDisabled": [4, "form-disabled"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bank-account-form-inputs", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bank-account-form-inputs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BankAccountFormInputs);
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BankAccountFormInputs as B, defineCustomElement as d };

package/dist/module/bank-account-form2.js

@@ -15,7 +15,7 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class BankAccountForm e
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: '1fb5075ddb4ee824fa3fbb12079ae0b978ef4e45' }, h("div", { key: '5384dda318b8e809cbee84f5e7796b68f19b780c', class: "container-fluid p-0" }, h("div", { key: '8e9a05728736960ac0e7f0d33a7e46d37b6a04fa', class: "row mb-3" }, h("iframe-input", { key: '46f8a193ed56ea621aac1399e8d7b22a286fd857', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${"https://components.justifi.ai/v2"}/accountNumber` })), h("div", { key: '18db1dd7882e9c3d395f4c72833d96a8f7e1176d', class: "row" }, h("iframe-input", { key: 'ea1545703839166cb3352b789bac329f0d0b2918', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${"https://components.justifi.ai/v2"}/routingNumber` })))));
+        return (h(Host, { key: '6e351c4e7bd3afe586f988855a8347c7ddd08ec8' }, h("div", { key: '822a342538c44f9d643a1b443302107cc3086ba1', class: "container-fluid p-0" }, h("div", { key: 'bacfd7176144928a80cb0bc491b9a83e7260c502', class: "row mb-3" }, h("iframe-input", { key: '77c88ac7f6c26f8467d9c1d2f8f053bd6003bfec', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${"https://components.justifi.ai/v2"}/accountNumber` })), h("div", { key: 'da73fc03e8c124a37d0fa84a66439c879e745ef2', class: "row" }, h("iframe-input", { key: '2f36b96ecff473ef72e47ce5b9b009fe1067eee2', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${"https://components.justifi.ai/v2"}/routingNumber` })))));
     }
 }, [0, "bank-account-form", {
         "validate": [64],

package/dist/module/billing-form-wrapper.js

@@ -1,5 +1,5 @@
 import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
-import { T as heading3, U as billingForm } from './parts.js';
+import { U as heading3, V as billingForm } from './parts.js';
 import './details.js';
 import { d as defineCustomElement$6 } from './billing-form2.js';
 import { d as defineCustomElement$5 } from './custom-popper2.js';

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

@@ -5,8 +5,8 @@ import { A as AdditionalQuestions } from './Business.js';
 import { C as CURRENCY_MASK } from './form-input-masks.js';
 import { h as heading2 } from './parts.js';
 import { P as PaymentProvisioningLoading } from './payment-provisioning-loading.js';
-import { a as businessServiceReceivedOptions, r as recurringPaymentsOptions, s as seasonalBusinessOptions } from './business-form-options.js';
-import { B as BusinessFormStep } from './event-types2.js';
+import { c as businessServiceReceivedOptions, r as recurringPaymentsOptions, s as seasonalBusinessOptions } from './business-form-options.js';
+import { B as BusinessFormStep } from './event-types.js';
 import { d as defineCustomElement$5 } from './custom-popper2.js';
 import { d as defineCustomElement$4 } from './form-control-monetary2.js';
 import { d as defineCustomElement$3 } from './form-control-select2.js';

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();
             }