@justifi/webcomponents 6.7.2 → 6.8.0

package/dist/cjs/bank-account-document-form-inputs_9.cjs.entry.js

@@ -0,0 +1,532 @@
+'use strict';
+
+var index = require('./index-p7cvUYAE.js');
+require('./config-state-BIgGhhe9.js');
+require('./dinero-BwNN_k7x.js');
+var ComponentError = require('./ComponentError-D4OLnOkg.js');
+var Plaid = require('./Plaid-DxPvVu0H.js');
+require('./Pagination-Dediz133.js');
+require('./Business-CB8EVrhD.js');
+require('./Dispute-CruQTF6_.js');
+var businessFormOptions = require('./business-form-options-B3CbEmdc.js');
+require('./event-types-DNOUef41.js');
+var utils = require('./utils-DAyWinG2.js');
+var parts = require('./parts-BsBVknuf.js');
+var utils$1 = require('./utils-D4WPxuzW.js');
+var skeleton = require('./skeleton-BGGMhPJj.js');
+require('./event-types-YOY5TKUN.js');
+var formControlErrorText = require('./form-control-error-text-BC5aRpfl.js');
+var inputHandlers = require('./input-handlers-gV1LyFy3.js');
+var formInputMasks = require('./form-input-masks-BnNFJ3IJ.js');
+var countryConfig = require('./country-config-ETD-7Wb7.js');
+var paymentProvisioningActions = require('./payment-provisioning-actions-CZVlnRA0.js');
+var business_service = require('./business.service-zGEitIbP.js');
+var button = require('./button-C2p1BMP-.js');
+var styledHost = require('./styled-host-DAi5SuFa.js');
+var plaidIcon = require('./plaid-icon-DTpONc_Q.js');
+require('./index-W-zoNiyM.js');
+require('./index-CajjbB9t.js');
+require('./utils-DvUQQLmR.js');
+require('./Api-CVbEWBG6.js');
+
+const BankAccountDocumentFormInputs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("div", { key: '7f9ea576aad16f3c2ea45c987a38878ea65f2df2', class: "row gy-3" }, index.h("div", { key: '316fe3f20df7c7dce2b8903e6073e0fe7920e5e8', class: "col-12" }, index.h("form-control-file", { key: '320d6b7f3de2cfeeb30eb1e08ca4122123854ffd', name: "voided_check", label: "Voided Check", documentType: Plaid.EntityDocumentType.voidedCheck, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["voided_check"], multiple: true })), index.h("div", { key: 'f33a936c61c14c701e40d375e4dfc4c554b8293c', class: "col-12" }, index.h("form-control-file", { key: '1e160d8211a71175d6a45b10590fb2c8774f61e1', name: "bank_statement", label: "Bank Statement", documentType: Plaid.EntityDocumentType.bankStatement, inputHandler: this.inputHandler, onFileSelected: this.storeFiles, errorText: this.errors["bank_statement"], multiple: true }))));
+    }
+};
+
+const BankAccountFormInputs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        return (index.h("div", { key: '5dc7139f54d11979410d0d67ca29e65b02f30200', class: "row gy-3" }, index.h("div", { key: '118f15bf02855b24baec5ce2a2c3cf5b241b3da4', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Bank Name", value: (_a = this.defaultValue) === null || _a === void 0 ? void 0 : _a.bank_name })) : (index.h("form-control-text", { name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler }))), index.h("div", { key: 'db03eccee03ec4b7d0de637306315982a2cd770d', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Nickname", value: (_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.nickname })) : (index.h("form-control-text", { name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler }))), index.h("div", { key: '217120e0052b8ee41cac8f901ac4d9742b0c6ea9', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Owner Name", value: (_c = this.defaultValue) === null || _c === void 0 ? void 0 : _c.account_owner_name })) : (index.h("form-control-text", { name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler }))), index.h("div", { key: 'f589511545d6262966a6fa2888cb78babacfb770', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Type", value: (_d = this.defaultValue) === null || _d === void 0 ? void 0 : _d.account_type })) : (index.h("form-control-select", { name: "account_type", label: "Account Type", options: businessFormOptions.bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler }))), index.h("div", { key: '24df83bb2666cee381c266608c43f3fd729db4cf', class: "col-6" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Number", value: ((_e = this.defaultValue) === null || _e === void 0 ? void 0 : _e.account_number_last4) ? `**** ${this.defaultValue.account_number_last4}` : '' })) : (index.h("form-control-text", { name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "Please copy the account number as shown on your statement/check. Do not include spaces or dashes." }))), index.h("div", { key: '75fe11d71e57707d088f8a90a250621fce82647f', class: "col-6" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Routing Number", value: ((_f = this.defaultValue) === null || _f === void 0 ? void 0 : _f.routing_number) || '' })) : (index.h("form-control-text", { name: "routing_number", label: "Routing Number", defaultValue: this.defaultValue.routing_number, maxLength: 9, errorText: this.errors.routing_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "A valid routing number is nine digits. Please include any leading or trailing zeroes." })))));
+    }
+};
+
+const BankAccountFormInputsCanada = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return (index.h("div", { key: '34cbf10449df73748095fd7122d0ae1355a83e13', class: "row gy-3" }, index.h("div", { key: '607cc5cbc70fdd2d5a325bef7002a44740394282', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Bank Name", value: (_a = this.defaultValue) === null || _a === void 0 ? void 0 : _a.bank_name })) : (index.h("form-control-text", { name: "bank_name", label: "Bank Name", defaultValue: this.defaultValue.bank_name, errorText: this.errors.bank_name, inputHandler: this.inputHandler }))), index.h("div", { key: 'f57f4cd733f2dd439d6d83f32078371618f5fa06', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Nickname", value: (_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.nickname })) : (index.h("form-control-text", { name: "nickname", label: "Nickname", defaultValue: this.defaultValue.nickname, errorText: this.errors.nickname, inputHandler: this.inputHandler }))), index.h("div", { key: 'b92dface0116321ea990bfcaf1b036b5629385db', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Owner Name", value: (_c = this.defaultValue) === null || _c === void 0 ? void 0 : _c.account_owner_name })) : (index.h("form-control-text", { name: "account_owner_name", label: "Account Owner Name", defaultValue: this.defaultValue.account_owner_name, errorText: this.errors.account_owner_name, inputHandler: this.inputHandler }))), index.h("div", { key: '45d68efa47de76ee420cedfb97e82f498a2de97b', class: "col-12" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Type", value: (_d = this.defaultValue) === null || _d === void 0 ? void 0 : _d.account_type })) : (index.h("form-control-select", { name: "account_type", label: "Account Type", options: businessFormOptions.bankAccountTypeOptions, defaultValue: this.defaultValue.account_type, errorText: this.errors.account_type, inputHandler: this.inputHandler }))), index.h("div", { key: '8419925e8470d63d506e1f7e82ccdf1a1132ecc0', class: "col-3" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Transit Number", value: ((_e = this.defaultValue) === null || _e === void 0 ? void 0 : _e.transit_number) || '' })) : (index.h("form-control-text", { name: "transit_number", label: "Transit Number", defaultValue: this.defaultValue.transit_number, maxLength: 5, errorText: this.errors.transit_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "5 digits" }))), index.h("div", { key: 'aa6e83c409e0cf93f1903394f63c0b719ec8808e', class: "col-3" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Institution Number", value: ((_f = this.defaultValue) === null || _f === void 0 ? void 0 : _f.institution_number) || '' })) : (index.h("form-control-text", { name: "institution_number", label: "Institution Number", defaultValue: this.defaultValue.institution_number, maxLength: 3, errorText: this.errors.institution_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "3 digits" }))), index.h("div", { key: '029058c023daca9d0488f45478af6edafe359df7', class: "col-6" }, this.formDisabled ? (index.h("bank-account-read-only-value", { label: "Account Number", value: ((_g = this.defaultValue) === null || _g === void 0 ? void 0 : _g.account_number_last4) ? `**** ${this.defaultValue.account_number_last4}` : '' })) : (index.h("form-control-text", { name: "account_number", label: "Account Number", defaultValue: this.defaultValue.account_number, maxLength: 17, errorText: this.errors.account_number, inputHandler: this.inputHandler, keyDownHandler: utils.numberOnlyHandler, helpText: "Please copy the account number as shown on your statement. Do not include spaces or dashes." })))));
+    }
+};
+
+const BankAccountReadOnlyValue = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("div", { key: 'ad9eadcf49dbc67e51cd814d3ded334a587cc17c' }, index.h("label", { key: 'b8ba3d8b7ef9fc33e0e0870f71b7df5dbfae4759', class: "form-label", part: parts.text }, this.label), index.h("div", { key: '1839bdadb96b3c814c73991530497f9a7be6a10d', part: parts.text }, this.value || '')));
+    }
+};
+
+const BusinessDocumentsOnFile = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.documents = [];
+        this.isLoading = false;
+    }
+    render() {
+        if (this.isLoading) {
+            return index.h(skeleton.Skeleton, { height: "50px" });
+        }
+        if (!this.documents.length) {
+            return null;
+        }
+        return (index.h(index.Host, null, index.h("div", { class: "card", part: parts.card }, index.h("div", { class: "card-body" }, index.h("h5", { class: "card-title", part: parts.heading2 }, "Documents Already on File"), index.h("div", { class: "table-responsive" }, index.h("table", { class: "table table-sm table-borderless", part: parts.table }, index.h("thead", null, index.h("tr", null, index.h("th", { style: { width: "25%" }, part: parts.tableHeadCell, scope: "col" }, "File Name"), index.h("th", { style: { width: "25%" }, part: parts.tableHeadCell, scope: "col" }, "File Type"), index.h("th", { style: { width: "25%" }, part: parts.tableHeadCell, scope: "col" }, "Document Type"), index.h("th", { style: { width: "25%" }, part: parts.tableHeadCell, scope: "col" }, "Date Uploaded"))), index.h("tbody", null, this.documents.sort((a, b) => a.document_type.localeCompare(b.document_type))
+            .map((document, index$1) => {
+            return (index.h("tr", { class: index$1 === 0 ? "border-bottom border-top" : "border-bottom" }, index.h("td", { part: parts.tableCell }, document.file_name), index.h("td", { part: parts.tableCell }, document.file_type), index.h("td", { part: parts.tableCell }, utils$1.snakeCaseToHumanReadable(document.document_type)), index.h("td", { part: parts.tableCell }, `${utils$1.formatDate(document.created_at)} - ${utils$1.formatTime(document.created_at)}`)));
+        })))))), index.h("hr", null)));
+    }
+};
+
+const FileInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.formControlInput = index.createEvent(this, "formControlInput", 7);
+        this.formControlBlur = index.createEvent(this, "formControlBlur", 7);
+        this.fileSelected = index.createEvent(this, "fileSelected", 7);
+        this.isFocused = false;
+        this.errorText = '';
+        this.inputHandler = () => { };
+        this.disabled = false;
+        this.handleFormControlInput = (event) => {
+            const target = event.target;
+            const name = target.getAttribute('name');
+            this.inputHandler(name, target.value);
+            this.formControlInput.emit({ name, value: target.value });
+        };
+        this.changeHandler = () => {
+            const inputFileList = this.fileInput.files;
+            if (inputFileList) {
+                this.fileSelected.emit({
+                    fileList: inputFileList,
+                    document_type: this.documentType
+                });
+            }
+        };
+    }
+    componentDidLoad() {
+        this.fileInput = this.el.querySelector('input');
+    }
+    get part() {
+        let part = parts.input;
+        if (this.errorText) {
+            part = parts.inputInvalid;
+        }
+        if (this.disabled) {
+            part = parts.inputDisabled;
+        }
+        if (this.isFocused) {
+            part = parts.inputFocused;
+        }
+        return part;
+    }
+    render() {
+        return (index.h(index.Host, { key: '430da302c06fb83a93c10bbf8d9b62ff89fc9e5e' }, index.h("div", { key: '2235fd7e9ef83839a5c9644828580cb1727cb3cc', class: "form-group d-flex flex-column" }, index.h("div", { key: 'e899430b50cd692e76b4992d01df4ab5ef754ff4', class: "d-flex align-items-start gap-2" }, index.h("label", { key: '41a257c0c9064ababe2167522690678627d574ec', part: parts.label, class: "form-label", htmlFor: this.name }, this.label), index.h("form-control-tooltip", { key: '734a6dbf61d1f04920b01e8d9024c29bc8cf0967', helpText: this.helpText })), index.h("input", { key: '6bbe60077bbff7c427cb84883f91489ae58abbd1', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
+                this.isFocused = false;
+                this.formControlBlur.emit();
+            } }), index.h(formControlErrorText.FormControlErrorText, { key: '4b0ed448a2f7fd8e76d21abdaa47662f847bca7f', errorText: this.errorText, name: this.name }))));
+    }
+    get el() { return index.getElement(this); }
+};
+
+const RepresentativeFormInputs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isEditingIdentification = false;
+        this.inputHandler = (name, value) => {
+            inputHandlers.updateFormValues(this.formController, { [name]: value });
+        };
+        this.onAddressFormUpdate = (values) => {
+            inputHandlers.updateAddressFormValues(this.formController, Object.assign(Object.assign({}, this.formController.values.getValue().address), values));
+        };
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return (index.h("form", { key: 'a9c0f6332bf302d5eb9f93c4ca045d572a40468f' }, index.h("fieldset", { key: '115c564826335a9c7b670bbc0409912c3eb7a4aa' }, index.h("div", { key: '6de8909b4b2f3c7d8ec4665aad77ef59cdf035b4', class: "d-flex align-items-center gap-2" }, index.h("legend", { key: 'bb8b5a3775eae450a866356a9e149a0bf57b5699', class: "mb-0", part: parts.heading2 }, "Representative"), index.h("form-control-tooltip", { key: 'a0296d4a3c35a039525f39501e117ee6fdd12257', 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." })), index.h("hr", { key: 'abbee22f5664275f27dd8eeb2b12c87b059ff024', class: "mt-2" }), index.h("div", { key: 'e165ff125df62dc1d22b7329fe7fe2ff200cbbb3', class: "row gy-3" }, index.h("div", { key: '114ff752eeda3ffa90529ff6bc675b874f543336', class: "col-12 col-md-8" }, index.h("form-control-text", { key: '8b6ce9f4a327ca5282aa32c226f671945aa10404', name: "name", label: "Full Name", defaultValue: (_a = this.representativeDefaultValue) === null || _a === void 0 ? void 0 : _a.name, errorText: this.errors.name, inputHandler: this.inputHandler })), index.h("div", { key: 'bce864367883c6bbf7bd0841114a3dbb39db692b', class: "col-12 col-md-4" }, index.h("form-control-text", { key: 'ec3e72dc3f84c0daee2c6509f7dbf2bad22f5db6', 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." })), index.h("div", { key: '200ae959d897d9d22016553d3c586cf3f0438dd9', class: "col-12 col-md-6" }, index.h("form-control-text", { key: '4f77d6ca6c3c85edabc11af6f5703ab1327f05e7', name: "email", label: "Email Address", defaultValue: (_c = this.representativeDefaultValue) === null || _c === void 0 ? void 0 : _c.email, errorText: this.errors.email, inputHandler: this.inputHandler })), index.h("div", { key: 'cf642ee73f7ae8b254920a3f781c23dc456f16ae', class: "col-12 col-md-6" }, index.h("form-control-number-masked", { key: 'df609213bec728f17b2527a2e99ff3e0e69604aa', 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: formInputMasks.PHONE_MASKS.US })), index.h("div", { key: '2e4565c06976723ae4e497a5305cea7468bac2f4', class: "col-12 col-md-4" }, index.h("form-control-date", { key: 'ca7d4bf05c32d1d9983df430d338cc3433015957', 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) => inputHandlers.updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), index.h("div", { key: 'f6cbe1b7f4e5575f626e6d73f31b4a1a09ac33e3', class: "col-12 col-md-8" }, (!((_f = this.representativeDefaultValue) === null || _f === void 0 ? void 0 : _f.ssn_last4) || this.isEditingIdentification) ? (index.h("form-control-number-masked", { name: "identification_number", label: countryConfig.countryLabels[this.country].idNumberLabel, defaultValue: this.isEditingIdentification ? '' : (_g = this.representativeDefaultValue) === null || _g === void 0 ? void 0 : _g.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: formInputMasks.IDENTITY_MASKS[this.country], helpText: countryConfig.countryLabels[this.country].identityHelpText })) : (index.h("div", null, index.h("label", { class: "form-label", part: parts.label }, countryConfig.countryLabels[this.country].idNumberLabel), index.h("div", { class: "input-group mb-3" }, index.h("input", { type: "text", class: "form-control", part: parts.inputDisabled, value: `****${(_h = this.representativeDefaultValue) === null || _h === void 0 ? void 0 : _h.ssn_last4}`, disabled: true }), index.h("button", { class: "btn btn-secondary", type: "button", part: parts.buttonSecondary, onClick: () => {
+                this.isEditingIdentification = true;
+                // Clear current value to force validation
+                inputHandlers.updateFormValues(this.formController, {
+                    identification_number: '',
+                    ssn_last4: null
+                });
+            } }, "Change"))))), index.h("div", { key: 'e3fa556dece2feaf5eb175ae3734c2319777ef48', class: "col-12" }, index.h("justifi-identity-address-form", { key: 'fe3d349371d11b8a246b9c31aebd7d9c84e03f8e', errors: this.errors.address, defaultValues: (_j = this.representativeDefaultValue) === null || _j === void 0 ? void 0 : _j.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))))));
+    }
+};
+
+const BusinessOwnerForm = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.errorEvent = index.createEvent(this, "error-event", 7);
+    }
+    async validate() {
+        return this.coreComponent.validate();
+    }
+    async submit() {
+        return this.coreComponent.submit();
+    }
+    async validateAndSubmit({ onSuccess }) {
+        this.coreComponent.validateAndSubmit({ onSuccess });
+    }
+    componentWillLoad() {
+        this.initializeApi();
+    }
+    initializeApi() {
+        if (!this.authToken) {
+            return;
+        }
+        this.getOwner = paymentProvisioningActions.makeGetIdentity({
+            authToken: this.authToken,
+            identityId: this.ownerId,
+            service: new business_service.IdentityService()
+        });
+        this.patchOwner = paymentProvisioningActions.makePatchIdentity({
+            authToken: this.authToken,
+            identityId: this.ownerId,
+            service: new business_service.IdentityService()
+        });
+        this.postOwner = paymentProvisioningActions.makePostIdentity({
+            authToken: this.authToken,
+            service: new business_service.IdentityService()
+        });
+    }
+    render() {
+        return (index.h("owner-form-core", { key: '47c36dfc76ac8a108950e17770d1a0fb06fe4e42', ownerId: this.ownerId, businessId: this.businessId, getOwner: this.getOwner, patchOwner: this.patchOwner, postOwner: this.postOwner, allowOptionalFields: this.allowOptionalFields, removeOwner: this.removeOwner, newFormOpen: this.newFormOpen, ownersLength: this.ownersLength, country: this.country, ref: ref => this.coreComponent = ref }));
+    }
+};
+
+const PlaidVerification = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.plaidVerificationSuccess = index.createEvent(this, "plaidVerificationSuccess", 7);
+        this.plaidVerificationError = index.createEvent(this, "plaidVerificationError", 7);
+        this.linkToken = null;
+        this.linkTokenId = null;
+        this.plaidLink = null;
+        this.isAuthenticating = false;
+        this.isSuccess = false;
+        this.error = null;
+        this.isLoading = false;
+        this.plaidService = new plaidIcon.PlaidService();
+        this.abortController = null;
+        this.timeoutId = null;
+        this.initializePlaidLink = async () => {
+            try {
+                // Check if Plaid is available globally
+                if (typeof window.Plaid === 'undefined') {
+                    this.handleError({
+                        code: Plaid.PlaidErrorCodes.PLAID_SDK_LOAD_FAILED,
+                        message: Plaid.PLAID_ERROR_MESSAGES[Plaid.PlaidErrorCodes.PLAID_SDK_LOAD_FAILED],
+                        severity: Plaid.PLAID_ERROR_SEVERITY[Plaid.PlaidErrorCodes.PLAID_SDK_LOAD_FAILED],
+                        retryable: true,
+                        userAction: 'Refresh the page and try again',
+                    });
+                    return;
+                }
+                // Get link token from backend
+                await this.getLinkToken();
+                if (!this.linkToken) {
+                    this.handleError({
+                        code: Plaid.PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED,
+                        message: Plaid.PLAID_ERROR_MESSAGES[Plaid.PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED],
+                        severity: Plaid.PLAID_ERROR_SEVERITY[Plaid.PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED],
+                        retryable: true,
+                        userAction: 'Click to try again',
+                    });
+                    return;
+                }
+                // Initialize Plaid Link
+                const Plaid$1 = window.Plaid;
+                this.plaidLink = Plaid$1.create({
+                    token: this.linkToken,
+                    onSuccess: this.handlePlaidSuccess,
+                    onExit: this.handlePlaidExit,
+                    onEvent: this.handlePlaidEvent,
+                    onLoad: this.handlePlaidLoad,
+                });
+            }
+            catch (error) {
+                this.handleError({
+                    code: Plaid.PlaidErrorCodes.PLAID_LINK_INIT_FAILED,
+                    message: Plaid.PLAID_ERROR_MESSAGES[Plaid.PlaidErrorCodes.PLAID_LINK_INIT_FAILED],
+                    severity: Plaid.PLAID_ERROR_SEVERITY[Plaid.PlaidErrorCodes.PLAID_LINK_INIT_FAILED],
+                    originalError: error,
+                    retryable: true,
+                    userAction: 'Click to try again',
+                });
+            }
+        };
+        this.getLinkToken = async () => {
+            var _a, _b, _c, _d;
+            try {
+                if (!this.authToken || !this.accountId) {
+                    this.handleError({
+                        code: Plaid.PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED,
+                        message: 'Missing authentication. Please provide authToken and accountId.',
+                        severity: ComponentError.ComponentErrorSeverity.ERROR,
+                        retryable: false,
+                        userAction: 'Provide required props',
+                    });
+                    return;
+                }
+                // Create abort controller for timeout handling
+                this.abortController = new AbortController();
+                // Set timeout for the request
+                this.timeoutId = setTimeout(() => {
+                    var _a;
+                    (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+                }, 30000); // 30 second timeout
+                const response = await this.plaidService.getLinkTokenForVerification(this.authToken, this.businessId, this.abortController.signal);
+                // Clear timeout
+                if (this.timeoutId) {
+                    clearTimeout(this.timeoutId);
+                    this.timeoutId = null;
+                }
+                if (response.error) {
+                    const errorMessage = typeof response.error === 'string'
+                        ? response.error
+                        : response.error.message || 'Failed to get link token';
+                    throw new Error(errorMessage);
+                }
+                this.linkToken = response.data.link_token;
+                this.linkTokenId = response.data.id;
+            }
+            catch (error) {
+                // Clear timeout
+                if (this.timeoutId) {
+                    clearTimeout(this.timeoutId);
+                    this.timeoutId = null;
+                }
+                let errorCode = Plaid.PlaidErrorCodes.PLAID_LINK_TOKEN_FAILED;
+                let message = Plaid.PLAID_ERROR_MESSAGES[errorCode];
+                let retryable = true;
+                // Handle specific error types
+                if (error.name === 'AbortError') {
+                    errorCode = Plaid.PlaidErrorCodes.PLAID_TIMEOUT;
+                    message = Plaid.PLAID_ERROR_MESSAGES[errorCode];
+                    retryable = true;
+                }
+                else if (((_a = error.message) === null || _a === void 0 ? void 0 : _a.includes('network')) || ((_b = error.message) === null || _b === void 0 ? void 0 : _b.includes('fetch'))) {
+                    errorCode = Plaid.PlaidErrorCodes.PLAID_NETWORK_ERROR;
+                    message = Plaid.PLAID_ERROR_MESSAGES[errorCode];
+                    retryable = true;
+                }
+                else if (((_c = error.message) === null || _c === void 0 ? void 0 : _c.includes('401')) || ((_d = error.message) === null || _d === void 0 ? void 0 : _d.includes('unauthorized'))) {
+                    errorCode = Plaid.PlaidErrorCodes.PLAID_INVALID_CREDENTIALS;
+                    message = 'Authentication failed. Please check your credentials.';
+                    retryable = false;
+                }
+                this.handleError({
+                    code: errorCode,
+                    message: message,
+                    severity: Plaid.PLAID_ERROR_SEVERITY[errorCode],
+                    originalError: error,
+                    retryable,
+                    userAction: retryable ? 'Click to try again' : 'Check your credentials',
+                });
+            }
+        };
+        this.openPlaidLink = () => {
+            if (this.plaidLink && this.linkToken) {
+                this.isAuthenticating = true;
+                this.clearError();
+                this.plaidLink.open();
+            }
+        };
+        this.handlePlaidSuccess = async (publicToken, _metadata) => {
+            var _a;
+            this.isAuthenticating = false;
+            this.isLoading = true;
+            this.clearError();
+            try {
+                // Send publicToken to backend
+                const response = await this.plaidService.postPlaidVerifiedBankAccountData(this.authToken, this.businessId, { public_token: publicToken, link_token_id: this.linkTokenId }, (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.signal);
+                if (response.error) {
+                    const errorMessage = typeof response.error === 'string'
+                        ? response.error
+                        : response.error.message || 'Failed to verify bank account';
+                    throw new Error(errorMessage);
+                }
+                // Success - display success message
+                this.isSuccess = true;
+                this.isLoading = false;
+                // Emit success event
+                this.plaidVerificationSuccess.emit({ publicToken, bankAccount: response.data });
+            }
+            catch (error) {
+                this.isLoading = false;
+                this.handleError({
+                    code: Plaid.PlaidErrorCodes.PLAID_AUTHENTICATION_FAILED,
+                    message: (error === null || error === void 0 ? void 0 : error.message) || 'Failed to verify bank account',
+                    severity: Plaid.PLAID_ERROR_SEVERITY[Plaid.PlaidErrorCodes.PLAID_AUTHENTICATION_FAILED],
+                    originalError: error,
+                    retryable: true,
+                    userAction: 'Click to try again',
+                });
+            }
+        };
+        this.handlePlaidExit = (err, _metadata) => {
+            this.isAuthenticating = false;
+            if (err) {
+                this.handlePlaidError(err);
+            }
+        };
+        this.handlePlaidEvent = (eventName, metadata) => {
+            // Handle specific events if needed
+            switch (eventName) {
+                case 'OPEN':
+                    this.isAuthenticating = true;
+                    break;
+                case 'CLOSE':
+                    this.isAuthenticating = false;
+                    break;
+                case 'ERROR':
+                    this.handlePlaidError(metadata);
+                    break;
+            }
+        };
+        this.handlePlaidLoad = () => {
+            // Plaid Link loaded successfully
+        };
+        this.handlePlaidError = (error) => {
+            let errorCode = Plaid.PlaidErrorCodes.PLAID_AUTHENTICATION_FAILED;
+            let message = Plaid.PLAID_ERROR_MESSAGES[errorCode];
+            let retryable = true;
+            let userAction = 'Click to try again';
+            // Map Plaid error codes to our error codes
+            if (error.error_code) {
+                switch (error.error_code) {
+                    case 'INVALID_CREDENTIALS':
+                        errorCode = Plaid.PlaidErrorCodes.PLAID_INVALID_CREDENTIALS;
+                        message = Plaid.PLAID_ERROR_MESSAGES[errorCode];
+                        retryable = true;
+                        break;
+                    case 'ITEM_LOGIN_REQUIRED':
+                        errorCode = Plaid.PlaidErrorCodes.PLAID_INVALID_CREDENTIALS;
+                        message = 'Your bank requires re-authentication. Please try again.';
+                        retryable = true;
+                        break;
+                    case 'ITEM_LOCKED':
+                        errorCode = Plaid.PlaidErrorCodes.PLAID_ACCOUNT_LOCKED;
+                        message = Plaid.PLAID_ERROR_MESSAGES[errorCode];
+                        retryable = false;
+                        userAction = 'Contact your bank';
+                        break;
+                    case 'INSTITUTION_NOT_RESPONDING':
+                        errorCode = Plaid.PlaidErrorCodes.PLAID_MAINTENANCE;
+                        message = Plaid.PLAID_ERROR_MESSAGES[errorCode];
+                        retryable = true;
+                        break;
+                    case 'RATE_LIMIT_EXCEEDED':
+                        errorCode = Plaid.PlaidErrorCodes.PLAID_RATE_LIMITED;
+                        message = Plaid.PLAID_ERROR_MESSAGES[errorCode];
+                        retryable = true;
+                        break;
+                    default:
+                        if (error.error_message) {
+                            message = error.error_message;
+                        }
+                        break;
+                }
+            }
+            this.handleError({
+                code: errorCode,
+                message,
+                severity: Plaid.PLAID_ERROR_SEVERITY[errorCode],
+                originalError: error,
+                retryable,
+                userAction,
+            });
+            this.isAuthenticating = false;
+        };
+        this.handleError = (plaidError) => {
+            this.error = plaidError;
+            this.isLoading = false;
+            // Emit error event for parent components
+            this.plaidVerificationError.emit(plaidError);
+            console.error('Plaid verification error:', plaidError);
+        };
+        this.clearError = () => {
+            if (this.error) {
+                this.error = null;
+            }
+        };
+    }
+    componentDidRender() {
+        if (!this.scriptRef)
+            return;
+        this.scriptRef.onload = () => {
+            this.initializePlaidLink();
+        };
+        this.scriptRef.onerror = () => {
+            this.handleError({
+                code: Plaid.PlaidErrorCodes.PLAID_SDK_LOAD_FAILED,
+                message: Plaid.PLAID_ERROR_MESSAGES[Plaid.PlaidErrorCodes.PLAID_SDK_LOAD_FAILED],
+                severity: Plaid.PLAID_ERROR_SEVERITY[Plaid.PlaidErrorCodes.PLAID_SDK_LOAD_FAILED],
+                retryable: true,
+                userAction: 'Refresh the page and try again',
+            });
+        };
+    }
+    disconnectedCallback() {
+        // Clean up timeouts and abort controllers
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+        }
+        if (this.abortController) {
+            this.abortController.abort();
+        }
+    }
+    render() {
+        const renderErrorState = () => {
+            if (!this.error)
+                return null;
+            const errorClass = this.error.severity === ComponentError.ComponentErrorSeverity.ERROR
+                ? 'text-danger'
+                : this.error.severity === ComponentError.ComponentErrorSeverity.WARNING
+                    ? 'text-warning'
+                    : 'text-info';
+            return (index.h("div", { class: `${errorClass} mt-2` }, index.h("small", null, this.error.message), index.h("br", null), this.error.userAction && (index.h("small", { class: "text-muted" }, this.error.userAction))));
+        };
+        const renderStatusState = () => {
+            if (this.error)
+                return null;
+            if (this.isLoading) {
+                return (index.h("div", { class: "text-info mt-2" }, index.h("small", null, "Verifying bank account...")));
+            }
+            if (this.isSuccess) {
+                return (index.h("div", { class: "text-success mt-2" }, index.h("small", null, "\u2713 Bank account verified successfully")));
+            }
+            if (this.isAuthenticating) {
+                return (index.h("div", { class: "text-info mt-2" }, index.h("small", null, "Connecting to your bank...")));
+            }
+            return null;
+        };
+        const plaidLogo = (index.h("img", { class: "plaid-logo-img", src: plaidIcon.plaidIconSvg, alt: "Plaid", title: "Plaid", style: {
+                display: 'inline',
+                width: '20px',
+                height: '20px',
+                marginLeft: '5px',
+                marginTop: '-2px',
+            } }));
+        return (index.h(styledHost.StyledHost, null, index.h("script", { src: "https://cdn.plaid.com/link/v2/stable/link-initialize.js", async: true, ref: (el) => (this.scriptRef = el) }), index.h("div", null, index.h("div", { class: "mb-3" }, index.h(button.Button, { variant: "secondary", type: "button", onClick: (event) => { event.preventDefault(); this.openPlaidLink(); }, disabled: this.isLoading, part: parts.buttonSecondary }, "Link Bank Account with ", plaidLogo)), renderErrorState(), renderStatusState())));
+    }
+};
+
+exports.bank_account_document_form_inputs = BankAccountDocumentFormInputs;
+exports.bank_account_form_inputs = BankAccountFormInputs;
+exports.bank_account_form_inputs_canada = BankAccountFormInputsCanada;
+exports.bank_account_read_only_value = BankAccountReadOnlyValue;
+exports.business_documents_on_file = BusinessDocumentsOnFile;
+exports.form_control_file = FileInput;
+exports.justifi_business_representative_form_inputs = RepresentativeFormInputs;
+exports.justifi_owner_form = BusinessOwnerForm;
+exports.plaid_verification = PlaidVerification;

package/dist/cjs/bank-account-form.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-BhI7cJcE.js');
-var skeleton = require('./skeleton-B8dzxFFr.js');
-var configState = require('./config-state-CYoBVAca.js');
+var index = require('./index-p7cvUYAE.js');
+var skeleton = require('./skeleton-BGGMhPJj.js');
+var configState = require('./config-state-BIgGhhe9.js');
 var utils = require('./utils-D4WPxuzW.js');
-require('./parts-BVbaniVM.js');
-require('./index-mmd0OhmD.js');
+require('./parts-BsBVknuf.js');
+require('./index-W-zoNiyM.js');
 require('./dinero-BwNN_k7x.js');
 
 const BankAccountFormSkeleton = (props) => {
@@ -48,10 +48,10 @@ const BankAccountForm = class {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (index.h(index.Host, { key: '32cfa049dff176af26d2a4bcb86c440a99bc8668' }, index.h(BankAccountFormSkeleton, { key: '8382fc8ff7726e245245db06b01fdc253d43328e', isReady: this.isReady }), index.h("div", { key: '83f16d13bb8c338dd859a60a7bd63edbb8f703b6', class: "container-fluid p-0", style: {
+        return (index.h(index.Host, { key: 'a104b2e88e818472d0158990ccf2cac6d7315616' }, index.h(BankAccountFormSkeleton, { key: '1ed1ac87a66aedf6a7528247e0ff3a803c74e4c3', isReady: this.isReady }), index.h("div", { key: 'a96c05c60c51f97c8abb7dc6a8cfebc940ea1513', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, index.h("div", { key: 'ff5a4020f51e917874583036ef3b50d9496a393e', class: "row mb-3" }, index.h("iframe-input", { key: '334cd1bbdb23cb1d4ae5df1f89737913209fd1c1', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), index.h("div", { key: '65a00ea0fe1202240a2641b40d5f0455483746ff', class: "row" }, index.h("iframe-input", { key: 'c8dda20444c7f6494fad1377cc556676e1d7dc54', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
+            } }, index.h("div", { key: '3d168fd241702b30f0c8727d3c0aae65c20b69aa', class: "row mb-3" }, index.h("iframe-input", { key: 'dc1da989b1577ed62b3eeafd33128aca38e4610d', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), index.h("div", { key: '1179ae9d6b9f476bb01a1ee4f4edd7da6f22f635', class: "row" }, index.h("iframe-input", { key: '7e79b383876be1711a2e21ab7462f86281ebf28c', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
     }
 };
 

package/dist/cjs/{business-additional-questions-schema-Y1mXnwUT.js → business-additional-questions-schema-Cnh6AXQU.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 var index_esm = require('./index.esm-ByC0D4sJ.js');
-var schemaValidations = require('./schema-validations-Bf2mk2xU.js');
-var Business = require('./Business-DWHy_-z9.js');
-var countryConfig = require('./country-config-MCOhn8o3.js');
+var schemaValidations = require('./schema-validations-BakyfJpE.js');
+var Business = require('./Business-CB8EVrhD.js');
+var countryConfig = require('./country-config-ETD-7Wb7.js');
 
 // Base schema (no country-specific rules for classification/tax id)
 const baseBusinessCoreInfoSchema = (allowOptionalFields) => {
@@ -54,12 +54,14 @@ const additionalQuestionsSchema = (allowOptionalFields) => {
     const schema = index_esm.create$3({
         business_revenue: schemaValidations.revenueValidation.required('Enter business revenue'),
         business_payment_volume: schemaValidations.paymentVolumeValidation.required('Enter business payment volume'),
+        business_average_transaction_amount: schemaValidations.revenueValidation.required('Enter average transaction amount'),
         business_when_service_received: schemaValidations.whenServiceReceivedValidation.required('Select when service is received'),
         business_other_payment_details: schemaValidations.otherPaymentDetailsValidation.nullable(),
     });
     const easySchema = index_esm.create$3({
         business_revenue: schemaValidations.revenueValidation.nullable(),
         business_payment_volume: schemaValidations.paymentVolumeValidation.nullable(),
+        business_average_transaction_amount: schemaValidations.revenueValidation.nullable(),
         business_when_service_received: schemaValidations.whenServiceReceivedValidation.nullable(),
         business_other_payment_details: schemaValidations.otherPaymentDetailsValidation.nullable(),
     });

package/dist/cjs/business-details-core.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-BhI7cJcE.js');
-var utils = require('./utils-CMiA4X7s.js');
-var styledHost = require('./styled-host-D5g7INLE.js');
+var index = require('./index-p7cvUYAE.js');
+var utils = require('./utils-T6hRmGuY.js');
+var styledHost = require('./styled-host-DAi5SuFa.js');
 require('./event-types-YOY5TKUN.js');
-var skeleton = require('./skeleton-B8dzxFFr.js');
-require('./parts-BVbaniVM.js');
+var skeleton = require('./skeleton-BGGMhPJj.js');
+require('./parts-BsBVknuf.js');
 
 const BusinessDetailsLoading = () => {
     const Block = () => (index.h("div", { class: "mt-5" }, index.h(skeleton.Skeleton, { width: "40%", height: "1.5rem" }), index.h("hr", null), index.h("div", { class: "row g-3" }, index.h("div", { class: "col-12 col-md-6" }, index.h(skeleton.Skeleton, null), index.h(skeleton.Skeleton, null), index.h(skeleton.Skeleton, null)), index.h("div", { class: "col-12 col-md-6" }, index.h(skeleton.Skeleton, null), index.h(skeleton.Skeleton, null), index.h(skeleton.Skeleton, null)))));
@@ -21,7 +21,7 @@ var RENDER_STATES;
 const BusinessDetailsCore = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.errorEvent = index.createEvent(this, "error-event");
+        this.errorEvent = index.createEvent(this, "error-event", 7);
         this.renderState = RENDER_STATES.LOADING;
     }
     async componentWillLoad() {
@@ -54,7 +54,7 @@ const BusinessDetailsCore = class {
         if (this.renderState === RENDER_STATES.ERROR) {
             return index.h(styledHost.StyledHost, null, utils.ErrorState(this.errorMessage));
         }
-        return (index.h(styledHost.StyledHost, null, index.h("justifi-details", { "error-message": this.errorMessage }, index.h("div", { slot: 'detail-sections' }, index.h("core-info-details", { business: this.business }), index.h("legal-address-details", { legalAddress: this.business.legal_address }), index.h("representative-details", { representative: this.business.representative }), index.h("owner-details", { owners: this.business.owners }), index.h("additional-questions-details", { additionalQuestions: this.business.additional_questions })))));
+        return (index.h(styledHost.StyledHost, null, index.h("justifi-details", { errorMessage: this.errorMessage }, index.h("div", { slot: 'detail-sections' }, index.h("core-info-details", { business: this.business }), index.h("legal-address-details", { legalAddress: this.business.legal_address }), index.h("representative-details", { representative: this.business.representative }), index.h("owner-details", { owners: this.business.owners }), index.h("additional-questions-details", { additionalQuestions: this.business.additional_questions })))));
     }
 };