@justifi/webcomponents 6.11.0 → 6.12.1-rc.1

package/dist/cjs/{justifi-additional-questions-form-step_9.cjs.entry.js → additional-questions-form-step_14.cjs.entry.js}

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-p7cvUYAE.js');
-var ComponentError = require('./ComponentError-D4OLnOkg.js');
-var paymentProvisioningActions = require('./payment-provisioning-actions-J6TGZZb9.js');
-var business_service = require('./business.service-mliLE8kX.js');
+var Plaid = require('./Plaid-6JK8xPnG.js');
+var paymentProvisioningActions = require('./payment-provisioning-actions-DscyasDY.js');
+var business_service = require('./business.service-XXjIL3rT.js');
 var businessAdditionalQuestionsSchema = require('./business-additional-questions-schema-CI80eZLJ.js');
 var index_esm = require('./index.esm-C1ZPG85l.js');
 var Business = require('./Business-oBifyXkW.js');
@@ -14,20 +14,23 @@ var businessFormOptions = require('./business-form-options-D_nM7NDk.js');
 var eventTypes = require('./event-types-DNOUef41.js');
 require('./config-state-BIgGhhe9.js');
 require('./dinero-BwNN_k7x.js');
-var Plaid = require('./Plaid-DR9WDZ98.js');
 require('./Pagination-Dediz133.js');
 require('./Dispute-CruQTF6_.js');
+var utils = require('./utils-DAyWinG2.js');
 var schemaValidations = require('./schema-validations-_yWWnnaG.js');
 var button = require('./button-CR9Rl1-o.js');
 require('./event-types-YOY5TKUN.js');
 var countryConfig = require('./country-config-D7fss2oF.js');
+var utils$1 = require('./utils-BHi4j5rB.js');
+var skeleton = require('./skeleton-DvRCiQlA.js');
+var inputHandlers = require('./input-handlers-_51J5q7J.js');
 var businessIdentitySchema = require('./business-identity-schema-DWWtSiUF.js');
 var Api = require('./Api-Bukk55YZ.js');
-require('./utils-DvUQQLmR.js');
+var styledHost = require('./styled-host-DAi5SuFa.js');
+var plaid_service = require('./plaid.service-C0ZgOkwL.js');
+require('./utils-C4CgQd55.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
-require('./skeleton-DvRCiQlA.js');
 require('./index-W-zoNiyM.js');
-require('./utils-BHi4j5rB.js');
 
 class BankAccount {
     constructor(data) {
@@ -169,8 +172,8 @@ const AdditionalQuestionsFormStep = class {
         else {
             this.errorEvent.emit({
                 message: 'Missing required props',
-                errorCode: ComponentError.ComponentErrorCodes.MISSING_PROPS,
-                severity: ComponentError.ComponentErrorSeverity.ERROR,
+                errorCode: Plaid.ComponentErrorCodes.MISSING_PROPS,
+                severity: Plaid.ComponentErrorSeverity.ERROR,
             });
         }
     }
@@ -189,6 +192,35 @@ const AdditionalQuestionsFormStep = class {
     }; }
 };
 
+const BankAccountDocumentFormInputs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("div", { key: 'e578f34f963b144c3121b1c1b3822d70b960aa79', class: "row gy-3" }, index.h("div", { key: 'cfb038a81afcd9f8c35e3145ddb77d5edf4e6c83', class: "col-12" }, index.h("form-control-file", { key: '23ff12d7fe707a5761e13ee71dd801c563cfdd54', 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: '107353c687412a90890901f9a37743fa222bdba5', class: "col-12" }, index.h("form-control-file", { key: '99223848b8937bb332b47f12245a9ef9467c8f93', 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: '735c8fd61c0dbf8f9ff51d284af45170b5660224', class: "row gy-3" }, index.h("div", { key: '894209630dd0abb597a6c67a56f8100e4d746d49', 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: '35c0f042f315c6ab4b0f8fdcac0e41cc765c17d6', 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: '0633bcb39aacf43b924af203f8e359f984eb0714', 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: 'aa31611fbc5abf27411f9057826c7371bc5775d3', 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: '1c05be48c83e85a16991875c367f9d853c8ec6e7', 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: 'da84ea19a3eea3b40b3d32d0135e1fda9163427e', 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: 'aea608cdca19fc3adac323404606aa7c56a18572', class: "row gy-3" }, index.h("div", { key: 'ef177cde388fb2c353a7e99088f59fa7add65a95', 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: '28371c86ce49071b8ba0326468124b5de5709548', 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: 'd6d822d223d29f266ceed47ced4b8938f39b9655', 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: '4c895bf0d84692d64fb79a597216913cd16e9fa9', 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: '4b37594d23e84228d347e1ee2747aa4712f4258c', 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: '7a1f042244ba0f3f20ad20c5b95771128c03174c', 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: '9af8cc4227238851ca63b75fb00210ce19210b48', 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 checkExistingDocs = (documents, documentType) => {
     return documents.some((doc) => doc.document_type === documentType);
 };
@@ -376,9 +408,9 @@ const BusinessBankAccountFormStep = class {
         this.handleDocRecordResponse = (docData, response) => {
             if (response.error) {
                 this.errorEvent.emit({
-                    errorCode: ComponentError.ComponentErrorCodes.POST_ERROR,
+                    errorCode: Plaid.ComponentErrorCodes.POST_ERROR,
                     message: response.error.message,
-                    severity: ComponentError.ComponentErrorSeverity.ERROR,
+                    severity: Plaid.ComponentErrorSeverity.ERROR,
                     data: response.error,
                 });
                 return false;
@@ -402,9 +434,9 @@ const BusinessBankAccountFormStep = class {
         this.handleUploadResponse = (response) => {
             if (response.error) {
                 this.errorEvent.emit({
-                    errorCode: ComponentError.ComponentErrorCodes.POST_ERROR,
+                    errorCode: Plaid.ComponentErrorCodes.POST_ERROR,
                     message: response.error.message,
-                    severity: ComponentError.ComponentErrorSeverity.ERROR,
+                    severity: Plaid.ComponentErrorSeverity.ERROR,
                     data: response.error,
                 });
                 return false;
@@ -459,8 +491,8 @@ const BusinessBankAccountFormStep = class {
         else {
             this.errorEvent.emit({
                 message: 'Missing required props',
-                errorCode: ComponentError.ComponentErrorCodes.MISSING_PROPS,
-                severity: ComponentError.ComponentErrorSeverity.ERROR,
+                errorCode: Plaid.ComponentErrorCodes.MISSING_PROPS,
+                severity: Plaid.ComponentErrorSeverity.ERROR,
             });
         }
     }
@@ -522,8 +554,8 @@ const BusinessBankAccountFormStep = class {
         catch (error) {
             this.errorEvent.emit({
                 message: error,
-                errorCode: ComponentError.ComponentErrorCodes.POST_ERROR,
-                severity: ComponentError.ComponentErrorSeverity.ERROR
+                errorCode: Plaid.ComponentErrorCodes.POST_ERROR,
+                severity: Plaid.ComponentErrorSeverity.ERROR
             });
         }
     }
@@ -740,8 +772,8 @@ const BusinessCoreInfoFormStep = class {
         else {
             this.errorEvent.emit({
                 message: 'Missing required props',
-                errorCode: ComponentError.ComponentErrorCodes.MISSING_PROPS,
-                severity: ComponentError.ComponentErrorSeverity.ERROR,
+                errorCode: Plaid.ComponentErrorCodes.MISSING_PROPS,
+                severity: Plaid.ComponentErrorSeverity.ERROR,
             });
         }
     }
@@ -763,6 +795,26 @@ const BusinessCoreInfoFormStep = class {
     }; }
 };
 
+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 BusinessOwnersFormStep = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -911,8 +963,8 @@ const BusinessOwnersFormStep = class {
         else {
             this.errorEvent.emit({
                 message: 'Missing required props',
-                errorCode: ComponentError.ComponentErrorCodes.MISSING_PROPS,
-                severity: ComponentError.ComponentErrorSeverity.ERROR,
+                errorCode: Plaid.ComponentErrorCodes.MISSING_PROPS,
+                severity: Plaid.ComponentErrorSeverity.ERROR,
             });
         }
     }
@@ -936,7 +988,7 @@ const BusinessOwnersFormStep = class {
         const isRepresentativeOwner = this.ownersPayload.some(owner => owner.id === this.representative.id);
         const shouldShowRepresentativeIsOwner = this.representativeIsOwner === null && !isRepresentativeOwner;
         return (index.h(index.Host, null, index.h("div", null, index.h("div", { class: "d-flex align-items-center gap-2" }, index.h("legend", { class: "mb-0", part: parts.heading2 }, "Owners"), index.h("form-control-tooltip", { helpText: "For partnerships, LLCs or privately held corporations, the business is required to apply with all individuals with 25% or more ownership to the application. For charities and registered non-profits, the business is required to apply with 1 individual with substantial control over the entity, such as a board member or director." })), index.h("hr", { class: "mt-2" }), shouldShowRepresentativeIsOwner && (index.h("div", { class: `alert alert-warning mb-3`, part: parts.alert }, index.h("div", { class: "card-body" }, index.h("div", { class: "d-flex align-items-center mb-3" }, index.h("strong", null, "Is the representative of this business also an owner?")), index.h("div", { class: "d-flex gap-2" }, index.h(button.Button, { variant: 'primary', onClick: () => this.handleRepresentativeIsOwnerChange(true) }, "Yes"), index.h(button.Button, { variant: 'secondary', onClick: () => this.handleRepresentativeIsOwnerChange(false) }, "No"))))), index.h("div", { class: 'row gy-3' }, this.ownersPayload.map((owner) => {
-            return (index.h("justifi-owner-form", { key: owner.id, authToken: this.authToken, businessId: this.businessId, ownerId: owner.id, removeOwner: this.removeOwnerForm, newFormOpen: this.newFormOpen, ownersLength: this.ownersPayload.length, country: this.country, allowOptionalFields: this.allowOptionalFields, ref: (ref) => this.matchRef(ref, owner.id) }));
+            return (index.h("owner-form", { key: owner.id, authToken: this.authToken, businessId: this.businessId, ownerId: owner.id, removeOwner: this.removeOwnerForm, newFormOpen: this.newFormOpen, ownersLength: this.ownersPayload.length, country: this.country, allowOptionalFields: this.allowOptionalFields, ref: (ref) => this.matchRef(ref, owner.id) }));
         })), index.h("div", { class: 'd-flex justify-content-start' }, index.h("div", { class: 'gap-2' }, index.h(button.Button, { variant: 'primary', onClick: () => this.addOwnerForm(true), hidden: !this.showAddOwnerButton }, "Add Owner"))))));
     }
     static get watchers() { return {
@@ -946,6 +998,30 @@ const BusinessOwnersFormStep = class {
     }; }
 };
 
+const BusinessRepresentativeFormInputs = 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: '042455d68a432e0e218d5b8750fb1d22b0d202fc' }, index.h("fieldset", { key: 'd8949e76f0a2185438382868e36ef6a79bbbb214' }, index.h("div", { key: '1471d4089c04b42408769ae5e964fe362c569205', class: "d-flex align-items-center gap-2" }, index.h("legend", { key: 'a59f689369a27f98dacab659f6f9c386475e9913', class: "mb-0", part: parts.heading2 }, "Representative"), index.h("form-control-tooltip", { key: '404259ace28a8bd64c8f43a630d60992c35c996c', helpText: "The representative for your business needs to be someone who has significant control over managing your business's finance. You will have an opportunity to add owners later in the form." })), index.h("hr", { key: 'bee8121f5a19680292259fba7a692a318c0d1c1e', class: "mt-2" }), index.h("div", { key: 'f7976d2ec594ff07016dccb9fcc4909ba6cabc71', class: "row gy-3" }, index.h("div", { key: '9a518fab2dd269e15afe05d8ca40157f97ca57db', class: "col-12 col-md-8" }, index.h("form-control-text", { key: '1340ac078c18d464a88b5ca6de92d887cb0b3913', 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: 'c680cdcab436875dde00c5ea68ab0bad9c56851e', class: "col-12 col-md-4" }, index.h("form-control-text", { key: 'ff9f6656c1147478b93f564774baa296fbb64922', 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: 'e6dcbe8bbe574db2756e5421e5fbcda41c7789cc', class: "col-12 col-md-6" }, index.h("form-control-text", { key: '9f42434ec29b41da77eb1c87723d6483fa5c0ebf', 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: '1e423be80b728506ec23b69df39d58ebd2a17313', class: "col-12 col-md-6" }, index.h("form-control-number-masked", { key: 'e5694e680d8a6b022978a358a524c2163a82549f', 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: '362dc639f0d046372a35201bfdc0ea24db87fb7c', class: "col-12 col-md-4" }, index.h("form-control-date", { key: '8d41cfc3ab11a373a42445542964d5a59f6c3f41', 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: 'ddafa094b5d67ef9ad8312f412a8032ce708d221', 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: 'd4c54dbda49e4a141d82340f1162e1b27460d474', class: "col-12" }, index.h("identity-address-form", { key: '1d70077d2d36e5f447353cbdb78900dfec903d0c', errors: this.errors.address, defaultValues: (_j = this.representativeDefaultValue) === null || _j === void 0 ? void 0 : _j.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))))));
+    }
+};
+
 const BusinessRepresentativeFormStep = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -1030,8 +1106,8 @@ const BusinessRepresentativeFormStep = class {
         else {
             this.errorEvent.emit({
                 message: 'Missing required props',
-                errorCode: ComponentError.ComponentErrorCodes.MISSING_PROPS,
-                severity: ComponentError.ComponentErrorSeverity.ERROR,
+                errorCode: Plaid.ComponentErrorCodes.MISSING_PROPS,
+                severity: Plaid.ComponentErrorSeverity.ERROR,
             });
         }
     }
@@ -1040,8 +1116,8 @@ const BusinessRepresentativeFormStep = class {
         if (!schemaFactory) {
             this.errorEvent.emit({
                 message: 'Missing schema for selected country',
-                errorCode: ComponentError.ComponentErrorCodes.MISSING_PROPS,
-                severity: ComponentError.ComponentErrorSeverity.ERROR,
+                errorCode: Plaid.ComponentErrorCodes.MISSING_PROPS,
+                severity: Plaid.ComponentErrorSeverity.ERROR,
             });
             return;
         }
@@ -1063,7 +1139,7 @@ const BusinessRepresentativeFormStep = class {
         if (!this.formController || this.isLoading) {
             return (index.h(paymentProvisioningLoading.PaymentProvisioningLoading, null));
         }
-        return (index.h("justifi-business-representative-form-inputs", { representativeDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController, country: this.country }));
+        return (index.h("business-representative-form-inputs", { representativeDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController, country: this.country }));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
@@ -1099,9 +1175,9 @@ const BusinessTermsConditionsFormStep = class {
             }
             catch (error) {
                 this.errorEvent.emit({
-                    errorCode: ComponentError.ComponentErrorCodes.FETCH_ERROR,
+                    errorCode: Plaid.ComponentErrorCodes.FETCH_ERROR,
                     message: error.message,
-                    severity: ComponentError.ComponentErrorSeverity.ERROR,
+                    severity: Plaid.ComponentErrorSeverity.ERROR,
                     data: error,
                 });
             }
@@ -1118,9 +1194,9 @@ const BusinessTermsConditionsFormStep = class {
             }
             catch (error) {
                 this.errorEvent.emit({
-                    errorCode: ComponentError.ComponentErrorCodes.POST_ERROR,
+                    errorCode: Plaid.ComponentErrorCodes.POST_ERROR,
                     message: error.message,
-                    severity: ComponentError.ComponentErrorSeverity.ERROR,
+                    severity: Plaid.ComponentErrorSeverity.ERROR,
                     data: error,
                 });
             }
@@ -1159,9 +1235,9 @@ const BusinessTermsConditionsFormStep = class {
     handleResponse(response, onSuccess) {
         if (response.error) {
             this.errorEvent.emit({
-                errorCode: ComponentError.ComponentErrorCodes.POST_ERROR,
+                errorCode: Plaid.ComponentErrorCodes.POST_ERROR,
                 message: response.error.message,
-                severity: ComponentError.ComponentErrorSeverity.ERROR,
+                severity: Plaid.ComponentErrorSeverity.ERROR,
                 data: response.error,
             });
         }
@@ -1191,7 +1267,7 @@ const BusinessTermsConditionsFormStep = class {
         return (index.h("a", { href: "https://justifi.tech/merchant-agreement/", target: "_blank", rel: "noopener noreferrer" }, "merchant agreement"));
     }
     render() {
-        return (index.h("form", { key: '33336d0a66d63ce39951822fd570a9a0689e714d' }, index.h("fieldset", { key: 'fcfdb59eef671cb408ed99e2dad20d6be706688a' }, index.h("legend", { key: 'f0cf7f0ac15c90cf36ee25d4bf986c0e781a2e92', part: parts.heading2 }, "Terms and Conditions"), index.h("hr", { key: 'd5c820e7d6523f931040a994bd103d69fd644c45' }), index.h("div", { key: '681b584de14afe121f5dc69ee0bad1cab51ba0d1' }, index.h("p", { key: '7c597bf891a108d303739126b806ded5220f56ab' }, "Please read and accept the ", this.merchantAgreementLink, " to submit your provisioning request.")), index.h("br", { key: '52854c5a07611180be40df21a5f60d7d9d4c4cb7' }), index.h("div", { key: '7448b3f6138b996edac137b961367725e3b40556', class: "row-gy-3" }, index.h("div", { key: 'c732deb4e1e3a2d04dd4e09914543a7f594af108', class: "col-12" }, index.h("form-control-checkbox", { key: 'fca18e4843aef20d13790029b114b2ecaeb6ffa2', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText, checked: this.acceptedTerms }))))));
+        return (index.h("form", { key: 'bd5117e6c5206dbbac772e6e9cbcb23f0dd3e8ad' }, index.h("fieldset", { key: 'ae9e0a6a5296a0fbad5ad1282a18ac3fd3d4445e' }, index.h("legend", { key: '86dd2cfd7c8c0114cee2c5cfe83c9dc8f9b113df', part: parts.heading2 }, "Terms and Conditions"), index.h("hr", { key: 'c3747ca0ecaf68734a9335e14730471130d1a428' }), index.h("div", { key: 'c5e1858326c6805c9cb16b84f224f95bb764b241' }, index.h("p", { key: '352e14efc77677ce445e6437f27d68b864ec500b' }, "Please read and accept the ", this.merchantAgreementLink, " to submit your provisioning request.")), index.h("br", { key: 'b94cae3d132d7d211b0bbff5f0070717b034b256' }), index.h("div", { key: 'ab728d134034552b02f74228746785e209776172', class: "row-gy-3" }, index.h("div", { key: '645592f8eb929766c4c12f743a46c6ce03ae7459', class: "col-12" }, index.h("form-control-checkbox", { key: '9fe09f38e66c2b1d879f620ab860ea2eee284889', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText, checked: this.acceptedTerms }))))));
     }
 };
 
@@ -1293,8 +1369,8 @@ const LegalAddressFormStep = class {
         else {
             this.errorEvent.emit({
                 message: 'Missing required props',
-                errorCode: ComponentError.ComponentErrorCodes.MISSING_PROPS,
-                severity: ComponentError.ComponentErrorSeverity.ERROR,
+                errorCode: Plaid.ComponentErrorCodes.MISSING_PROPS,
+                severity: Plaid.ComponentErrorSeverity.ERROR,
             });
         }
     }
@@ -1304,7 +1380,7 @@ const LegalAddressFormStep = class {
         if (this.isLoading) {
             return index.h(paymentProvisioningLoading.PaymentProvisioningLoading, null);
         }
-        return (index.h("form", null, index.h("fieldset", null, index.h("div", { class: "d-flex align-items-center gap-2" }, index.h("legend", { class: "mb-0", part: parts.heading2 }, "Legal Address of your Business"), index.h("form-control-tooltip", { helpText: "No PO Boxes." })), index.h("hr", { class: "mt-2" }), index.h("justifi-form-address-fields", { country: this.country, errors: this.errors, defaultValues: legalAddressDefaultValue, inputHandler: this.inputHandler }))));
+        return (index.h("form", null, index.h("fieldset", null, index.h("div", { class: "d-flex align-items-center gap-2" }, index.h("legend", { class: "mb-0", part: parts.heading2 }, "Legal Address of your Business"), index.h("form-control-tooltip", { helpText: "No PO Boxes." })), index.h("hr", { class: "mt-2" }), index.h("form-address-fields", { country: this.country, errors: this.errors, defaultValues: legalAddressDefaultValue, inputHandler: this.inputHandler }))));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
@@ -1312,53 +1388,370 @@ const LegalAddressFormStep = class {
     }; }
 };
 
-const PaymentProvisioningFormButtons = class {
+const OwnerForm = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.errorEvent = index.createEvent(this, "error-event", 7);
     }
-    get showPreviousStepButton() {
-        return this.currentStep > 0;
+    async validate() {
+        return this.coreComponent.validate();
     }
-    get showNextStepButton() {
-        return this.currentStep < this.totalSteps;
+    async submit() {
+        return this.coreComponent.submit();
     }
-    get showSubmitButton() {
-        return this.currentStep === this.totalSteps;
+    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("div", { key: '53ba6c809e1968712b333f4bcf2798dbca186ddb', class: 'd-flex gap-2' }, index.h(button.Button, { key: 'b45c60083ccf6589cae0c63ce6b66c18da340dc7', variant: "secondary", type: "button", onClick: () => this.previousStepButtonOnClick(), disabled: this.formDisabled, hidden: !this.showPreviousStepButton }, "Previous"), index.h(button.Button, { key: '27372798da0276de44d1563a4688486e7cc91d64', variant: "primary", type: "button", onClick: (e) => this.nextStepButtonOnClick(e, eventTypes.BusinessFormClickActions.nextStep), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showNextStepButton }, "Next"), index.h(button.Button, { key: '8bc14ca8fe951caf276f8ed03e502486e11acbe2', variant: "primary", type: "submit", onClick: (e) => this.nextStepButtonOnClick(e, eventTypes.BusinessFormClickActions.submit), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showSubmitButton }, "Submit")));
+        return (index.h("owner-form-core", { key: '82a1976007db4371de3c8da1cff48f27a9c7795e', 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 PaymentProvisioningFormSteps = class {
+const PlaidVerification = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.allowOptionalFields = false;
-        this.country = Business.CountryCode.USA;
-        this.componentStepMapping = {
-            0: () => index.h("justifi-business-core-info-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[0] = el, allowOptionalFields: this.allowOptionalFields, country: this.country }),
-            1: () => index.h("justifi-legal-address-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[1] = el, allowOptionalFields: this.allowOptionalFields, country: this.country }),
-            2: () => index.h("justifi-additional-questions-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[2] = el, allowOptionalFields: this.allowOptionalFields }),
-            3: () => index.h("justifi-business-representative-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[3] = el, allowOptionalFields: this.allowOptionalFields, country: this.country }),
-            4: () => index.h("justifi-business-owners-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[4] = el, allowOptionalFields: this.allowOptionalFields, country: this.country }),
-            5: () => index.h("justifi-business-bank-account-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[5] = el, allowOptionalFields: this.allowOptionalFields, country: this.country }),
-            6: () => index.h("justifi-business-terms-conditions-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[6] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields }),
+        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 plaid_service.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: Plaid.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',
+            });
         };
     }
-    get currentStepComponent() {
-        return this.componentStepMapping[this.currentStep]();
+    disconnectedCallback() {
+        // Clean up timeouts and abort controllers
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+        }
+        if (this.abortController) {
+            this.abortController.abort();
+        }
     }
     render() {
-        return (index.h("div", { key: 'ff7c9e688009383fdbe18c9824fa578d2338900c', class: 'col-12 mb-4' }, this.currentStepComponent));
+        const renderErrorState = () => {
+            if (!this.error)
+                return null;
+            const errorClass = this.error.severity === Plaid.ComponentErrorSeverity.ERROR
+                ? 'text-danger'
+                : this.error.severity === Plaid.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("svg", { class: "plaid-logo-img", height: "20", width: "20", viewBox: "0 0 28 29", xmlns: "http://www.w3.org/2000/svg", style: { display: 'inline', marginLeft: '5px', marginRight: '5px', marginTop: '-2px' } }, index.h("g", { fill: "#fff", "fill-rule": "evenodd" }, index.h("path", { d: "M25.7629 26.2628L28 17.5309L24.9691 14.5001L27.9999 11.4691L25.7628 2.73706L17.0309 0.5L14.0001 3.531L10.969 0.50014L2.23706 2.73734L0 11.4691L3.03128 14.4999L0.00014 17.531L2.2372 26.2629L10.9691 28.5L14.0001 25.469L17.031 28.4999L25.7629 26.2628ZM15.7321 23.7371L18.6186 20.8505L22.2912 24.5233L17.6956 25.7007L15.7321 23.7371ZM11.1136 9.88154L14.0003 6.99502L16.8868 9.8814L14.0001 12.7679L11.1136 9.88154ZM12.2682 14.5L9.38154 17.3865L6.49502 14.5L9.38154 11.6135L12.2682 14.5ZM18.6187 11.6133L21.5053 14.5L18.6186 17.3865L15.7321 14.5L18.6187 11.6133ZM16.8867 19.1186L14.0001 22.0051L11.1135 19.1185L14.0001 16.2319L16.8867 19.1186ZM10.3044 25.7007L5.70864 24.5233L9.38154 20.8504L12.2682 23.7371L10.3044 25.7007ZM4.76308 16.2319L7.6496 19.1185L3.9767 22.7914L2.7993 18.1957L4.76308 16.2319ZM3.9767 6.20836L7.64974 9.8814L4.76308 12.7681L2.7993 10.8041L3.9767 6.20836ZM12.2683 5.26294L9.38168 8.1496L5.70892 4.4767L10.3047 3.2993L12.2683 5.26294ZM17.6959 3.2993L22.2915 4.4767L18.6186 8.14946L15.7321 5.26294L17.6959 3.2993ZM23.2372 12.7681L20.3505 9.8814L24.0233 6.20878L25.2007 10.8046L23.2372 12.7681ZM24.0233 22.7914L20.3505 19.1186L23.2372 16.2321L25.2007 18.1957L24.0233 22.7914Z" }))));
+        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: "primary", type: "button", onClick: (event) => { event.preventDefault(); this.openPlaidLink(); }, disabled: this.isLoading, part: parts.buttonPrimary }, "Connect with Plaid ", plaidLogo, " (instant verification)")), renderErrorState(), renderStatusState())));
     }
 };
 
-exports.justifi_additional_questions_form_step = AdditionalQuestionsFormStep;
-exports.justifi_business_bank_account_form_step = BusinessBankAccountFormStep;
-exports.justifi_business_core_info_form_step = BusinessCoreInfoFormStep;
-exports.justifi_business_owners_form_step = BusinessOwnersFormStep;
-exports.justifi_business_representative_form_step = BusinessRepresentativeFormStep;
-exports.justifi_business_terms_conditions_form_step = BusinessTermsConditionsFormStep;
-exports.justifi_legal_address_form_step = LegalAddressFormStep;
-exports.justifi_payment_provisioning_form_buttons = PaymentProvisioningFormButtons;
-exports.justifi_payment_provisioning_form_steps = PaymentProvisioningFormSteps;
+exports.additional_questions_form_step = AdditionalQuestionsFormStep;
+exports.bank_account_document_form_inputs = BankAccountDocumentFormInputs;
+exports.bank_account_form_inputs = BankAccountFormInputs;
+exports.bank_account_form_inputs_canada = BankAccountFormInputsCanada;
+exports.business_bank_account_form_step = BusinessBankAccountFormStep;
+exports.business_core_info_form_step = BusinessCoreInfoFormStep;
+exports.business_documents_on_file = BusinessDocumentsOnFile;
+exports.business_owners_form_step = BusinessOwnersFormStep;
+exports.business_representative_form_inputs = BusinessRepresentativeFormInputs;
+exports.business_representative_form_step = BusinessRepresentativeFormStep;
+exports.business_terms_conditions_form_step = BusinessTermsConditionsFormStep;
+exports.legal_address_form_step = LegalAddressFormStep;
+exports.owner_form = OwnerForm;
+exports.plaid_verification = PlaidVerification;