@justifi/webcomponents 6.5.1-rc.5 → 6.7.0

package/dist/collection/components/business-forms/payment-provisioning/bank-account/business-bank-account-form-step.js

@@ -1,16 +1,183 @@
 import { h } from "@stencil/core";
-import { ComponentErrorCodes, ComponentErrorSeverity } from "../../../../api";
+import { ComponentErrorCodes, ComponentErrorSeverity, BankAccount, EntityDocument, EntityDocumentStorage } from "../../../../api";
 import { makeGetBusiness, makePostBankAccount, makePostDocumentRecord } from "../payment-provisioning-actions";
 import { BusinessService, BusinessBankAccountService, DocumentRecordService } from "../../../../api/services/business.service";
+import { CountryCode } from "../../../../utils/country-codes";
+import { bankAccountSchemaByCountry } from "../../schemas/business-bank-account-schema";
+import { FormController } from "../../../../ui-components/form/form";
+import { BusinessFormStep } from "../../utils";
+import { heading2, buttonSecondary } from "../../../../styles/parts";
+import { PaymentProvisioningLoading } from "../payment-provisioning-loading";
+import { Button } from "../../../../ui-components";
 export class BusinessBankAccountFormStep {
+    constructor() {
+        this.errors = {};
+        this.bankAccount = {};
+        this.existingDocuments = [];
+        this.documentData = new EntityDocumentStorage();
+        this.isLoading = false;
+        this.isAddingNewBankAccount = true;
+        this.getSchema = () => {
+            const schema = bankAccountSchemaByCountry[this.country];
+            return schema(this.allowOptionalFields, this.existingDocuments);
+        };
+        this.initializeFormController = () => {
+            this.formController = new FormController(this.getSchema());
+            if (this.isAddingNewBankAccount) {
+                // Clear form when adding a new bank account
+                this.formController.setInitialValues({ business_id: this.businessId });
+            }
+            else {
+                this.formController.setInitialValues(Object.assign({}, this.bankAccount));
+            }
+            this.formController.errors.subscribe(errors => {
+                this.errors = Object.assign({}, errors);
+            });
+        };
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+        this.storeFiles = (e) => {
+            const fileList = Array.from(e.detail.fileList);
+            const docType = e.detail.document_type;
+            const documentList = fileList.map(file => new EntityDocument({ file, document_type: docType }, this.businessId));
+            this.documentData[docType] = documentList;
+        };
+        this.getData = () => {
+            this.isLoading = true;
+            this.getBusiness({
+                onSuccess: (response) => {
+                    if (response.data.bank_accounts.length > 0) {
+                        // Get the latest bank account (last in array)
+                        const bankAccounts = response.data.bank_accounts;
+                        const latestBankAccount = bankAccounts[bankAccounts.length - 1];
+                        this.bankAccount = new BankAccount(latestBankAccount);
+                        this.isAddingNewBankAccount = false;
+                    }
+                    else {
+                        this.bankAccount = new BankAccount({});
+                        this.bankAccount.business_id = this.businessId;
+                    }
+                    this.existingDocuments = response.data.documents;
+                },
+                onError: ({ error, code, severity }) => {
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity: severity
+                    });
+                },
+                final: () => {
+                    this.initializeFormController();
+                    this.isLoading = false;
+                }
+            });
+        };
+        this.handleChangeBankAccount = () => {
+            this.isAddingNewBankAccount = true;
+            this.documentData = new EntityDocumentStorage();
+            this.initializeFormController();
+        };
+        this.handleCancel = () => {
+            this.isAddingNewBankAccount = false;
+            this.documentData = new EntityDocumentStorage();
+            this.initializeFormController();
+        };
+        this.handleSaveBankAccount = async () => {
+            this.formController.validateAndSubmit(() => {
+                this.sendData(() => {
+                    // Success callback - form will refresh automatically
+                });
+            });
+        };
+        this.postDocumentRecordData = async (docData) => {
+            this.isLoading = true;
+            const payload = docData.record_data;
+            return new Promise((resolve) => {
+                this.postDocumentRecord({
+                    payload,
+                    onSuccess: (response) => {
+                        resolve(this.handleDocRecordResponse(docData, response));
+                    },
+                    onError: ({ error, code, severity }) => {
+                        this.errorEvent.emit({
+                            message: error,
+                            errorCode: code,
+                            severity: severity
+                        });
+                        resolve(false);
+                    },
+                });
+            });
+        };
+        this.handleDocRecordResponse = (docData, response) => {
+            if (response.error) {
+                this.errorEvent.emit({
+                    errorCode: ComponentErrorCodes.POST_ERROR,
+                    message: response.error.message,
+                    severity: ComponentErrorSeverity.ERROR,
+                    data: response.error,
+                });
+                return false;
+            }
+            else {
+                docData.setPresignedUrl(response.data.presigned_url);
+                return true;
+            }
+        };
+        this.uploadDocument = async (docData) => {
+            if (!docData.presigned_url) {
+                throw new Error('Presigned URL is not set');
+            }
+            const fileData = await docData.getFileData();
+            const response = await fetch(docData.presigned_url, {
+                method: 'PUT',
+                body: fileData
+            });
+            return this.handleUploadResponse(response);
+        };
+        this.handleUploadResponse = (response) => {
+            if (response.error) {
+                this.errorEvent.emit({
+                    errorCode: ComponentErrorCodes.POST_ERROR,
+                    message: response.error.message,
+                    severity: ComponentErrorSeverity.ERROR,
+                    data: response.error,
+                });
+                return false;
+            }
+            else {
+                return true;
+            }
+        };
+    }
     propChanged() {
         this.initializeApi();
     }
+    watchHandler(newValue) {
+        this.formLoading.emit(newValue);
+    }
     async validateAndSubmit({ onSuccess }) {
-        this.coreComponent.validateAndSubmit({ onSuccess });
+        if (this.existingBankAccount && !this.isAddingNewBankAccount) {
+            // If a bank account already exists and we're not adding a new one, skip bank account posting; proceed directly to document upload
+            this.sendData(onSuccess);
+        }
+        else {
+            // If bank account is new, validate form inputs (bank account fields), then proceed
+            this.formController.validateAndSubmit(() => this.sendData(onSuccess));
+        }
     }
     componentWillLoad() {
         this.initializeApi();
+        if (this.getBusiness) {
+            this.getData();
+        }
+        this.formController = new FormController(this.getSchema());
+    }
+    componentDidLoad() {
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
     }
     initializeApi() {
         if (this.authToken && this.businessId) {
@@ -36,8 +203,127 @@ export class BusinessBankAccountFormStep {
             });
         }
     }
+    get postPayload() {
+        const values = this.formController.values.getValue();
+        const formValues = new BankAccount(values).payload;
+        return formValues;
+    }
+    get existingBankAccount() {
+        var _a;
+        return !!((_a = this.bankAccount) === null || _a === void 0 ? void 0 : _a.id);
+    }
+    get showReadOnlyView() {
+        return this.existingBankAccount && !this.isAddingNewBankAccount;
+    }
+    async sendData(onSuccess) {
+        try {
+            // Post bank account data if we're adding a new bank account
+            const bankAccountPosted = this.isAddingNewBankAccount ? await this.postBankAccountData() : true;
+            if (!bankAccountPosted) {
+                return;
+            }
+            // Post documents only after bank account was successfully created
+            const documentsUploaded = await this.postBusinessDocuments();
+            if (!documentsUploaded) {
+                return;
+            }
+            // Refresh bank account data after successful save
+            if (this.isAddingNewBankAccount) {
+                this.isAddingNewBankAccount = false;
+                await this.refreshBankAccountData();
+            }
+            onSuccess();
+        }
+        catch (error) {
+            this.errorEvent.emit({
+                message: error,
+                errorCode: ComponentErrorCodes.POST_ERROR,
+                severity: ComponentErrorSeverity.ERROR
+            });
+        }
+    }
+    async postBankAccountData() {
+        let submittedData;
+        this.isLoading = true;
+        return new Promise((resolve) => {
+            let success = false;
+            this.postBankAccount({
+                payload: this.postPayload,
+                onSuccess: (response) => {
+                    submittedData = response;
+                    success = true;
+                },
+                onError: ({ error, code, severity }) => {
+                    success = false;
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity: severity
+                    });
+                },
+                final: () => {
+                    this.stepCompleteEvent.emit({ response: submittedData, formStep: BusinessFormStep.bankAccount });
+                    this.isLoading = false;
+                    resolve(success);
+                }
+            });
+        });
+    }
+    async refreshBankAccountData() {
+        return new Promise((resolve) => {
+            this.isLoading = true;
+            this.getBusiness({
+                onSuccess: (response) => {
+                    if (response.data.bank_accounts.length > 0) {
+                        // Get the latest bank account (last in array)
+                        const bankAccounts = response.data.bank_accounts;
+                        const latestBankAccount = bankAccounts[bankAccounts.length - 1];
+                        this.bankAccount = new BankAccount(latestBankAccount);
+                    }
+                    this.existingDocuments = response.data.documents;
+                    this.initializeFormController();
+                },
+                onError: ({ error, code, severity }) => {
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity: severity
+                    });
+                },
+                final: () => {
+                    this.isLoading = false;
+                    resolve();
+                }
+            });
+        });
+    }
+    async postBusinessDocuments() {
+        this.isLoading = true;
+        try {
+            const docArray = Object.values(this.documentData).flat();
+            if (!docArray.length) {
+                return true;
+            }
+            const recordsCreated = await Promise.all(docArray.map((docData) => this.postDocumentRecordData(docData))); // Create document records
+            if (recordsCreated.includes(false)) {
+                return false;
+            } // Exit if document record creation fails
+            const uploadsCompleted = await Promise.all(docArray.map((docData) => this.uploadDocument(docData))); // Upload documents to AWS presigned URLs
+            if (uploadsCompleted.includes(false)) {
+                return false;
+            } // Exit if any upload fails
+            return true;
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
     render() {
-        return (h("justifi-business-bank-account-form-step-core", { key: 'f4e4c31d04884510d5b432b7cced5eea2b618bcd', businessId: this.businessId, getBusiness: this.getBusiness, postBankAccount: this.postBankAccount, postDocumentRecord: this.postDocumentRecord, allowOptionalFields: this.allowOptionalFields, country: this.country, ref: el => this.coreComponent = el }));
+        const bankAccountDefaultValue = this.formController.getInitialValues();
+        if (this.isLoading) {
+            return h(PaymentProvisioningLoading, null);
+        }
+        return (h("form", null, h("fieldset", { class: "mb-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Bank Account Info"), h("form-control-tooltip", { helpText: "This direct deposit account is the designated bank account where incoming funds will be deposited. The name of this account must match the registered business name exactly. We are not able to accept personal accounts unless your business is a registered sole proprietorship." })), h("hr", { class: "mt-2" }), this.country === CountryCode.CAN ? (h("bank-account-form-inputs-canada", { defaultValue: bankAccountDefaultValue, errors: this.errors, inputHandler: this.inputHandler, formDisabled: this.showReadOnlyView })) : (h("bank-account-form-inputs", { defaultValue: bankAccountDefaultValue, errors: this.errors, inputHandler: this.inputHandler, formDisabled: this.showReadOnlyView })), this.showReadOnlyView && (h("div", { class: "mt-3" }, h(Button, { variant: "secondary", type: "button", onClick: this.handleChangeBankAccount, disabled: this.isLoading, part: buttonSecondary }, "Change Bank Account"))), (!this.existingBankAccount || this.isAddingNewBankAccount) && (h("div", { class: "mt-3 d-flex gap-2" }, this.isAddingNewBankAccount && (h(Button, { variant: "secondary", type: "button", onClick: this.handleCancel, disabled: this.isLoading, part: buttonSecondary }, "Cancel")), h(Button, { variant: "primary", type: "button", onClick: this.handleSaveBankAccount, disabled: this.isLoading, isLoading: this.isLoading }, "Save Bank Account")))), h("fieldset", { class: "mt-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Document Uploads"), h("form-control-tooltip", { helpText: "One document (voided check or bank statement) is required for underwriting purposes. It needs to visibly show the name tied to the account and the account number. Various file formats such as PDF, DOC, DOCX, JPEG are accepted. Multiple files can be uploaded for each document category." })), h("hr", { class: "mt-2" }), h("business-documents-on-file", { documents: this.existingDocuments, isLoading: this.isLoading }), h("bank-account-document-form-inputs", { inputHandler: this.inputHandler, errors: this.errors, storeFiles: this.storeFiles }))));
     }
     static get is() { return "justifi-business-bank-account-form-step"; }
     static get properties() {
@@ -128,6 +414,13 @@ export class BusinessBankAccountFormStep {
     }
     static get states() {
         return {
+            "formController": {},
+            "errors": {},
+            "bankAccount": {},
+            "existingDocuments": {},
+            "documentData": {},
+            "isLoading": {},
+            "isAddingNewBankAccount": {},
             "getBusiness": {},
             "postBankAccount": {},
             "postDocumentRecord": {},
@@ -156,6 +449,42 @@ export class BusinessBankAccountFormStep {
                         }
                     }
                 }
+            }, {
+                "method": "stepCompleteEvent",
+                "name": "complete-form-step-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentFormStepCompleteEvent",
+                    "resolved": "ComponentFormStepCompleteEvent",
+                    "references": {
+                        "ComponentFormStepCompleteEvent": {
+                            "location": "import",
+                            "path": "../../../../api",
+                            "id": "src/api/index.ts::ComponentFormStepCompleteEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "formLoading",
+                "name": "formLoading",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -190,6 +519,9 @@ export class BusinessBankAccountFormStep {
             }, {
                 "propName": "businessId",
                 "methodName": "propChanged"
+            }, {
+                "propName": "isLoading",
+                "methodName": "watchHandler"
             }];
     }
 }

package/dist/collection/components/business-forms/payment-provisioning/bank-account/business-documents-on-file.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { formatDate, formatTimeSeconds, snakeCaseToHumanReadable } from "../../../../utils/utils";
+import { formatDate, formatTime, snakeCaseToHumanReadable } from "../../../../utils/utils";
 import { card, heading2, table, tableCell, tableHeadCell } from "../../../../styles/parts";
 import { Skeleton } from "../../../../ui-components";
 export class BusinessDocumentsOnFile {
@@ -16,7 +16,7 @@ export class BusinessDocumentsOnFile {
         }
         return (h(Host, null, h("div", { class: "card", part: card }, h("div", { class: "card-body" }, h("h5", { class: "card-title", part: heading2 }, "Documents Already on File"), h("div", { class: "table-responsive" }, h("table", { class: "table table-sm table-borderless", part: table }, h("thead", null, h("tr", null, h("th", { style: { width: "25%" }, part: tableHeadCell, scope: "col" }, "File Name"), h("th", { style: { width: "25%" }, part: tableHeadCell, scope: "col" }, "File Type"), h("th", { style: { width: "25%" }, part: tableHeadCell, scope: "col" }, "Document Type"), h("th", { style: { width: "25%" }, part: tableHeadCell, scope: "col" }, "Date Uploaded"))), h("tbody", null, this.documents.sort((a, b) => a.document_type.localeCompare(b.document_type))
             .map((document, index) => {
-            return (h("tr", { class: index === 0 ? "border-bottom border-top" : "border-bottom" }, h("td", { part: tableCell }, document.file_name), h("td", { part: tableCell }, document.file_type), h("td", { part: tableCell }, snakeCaseToHumanReadable(document.document_type)), h("td", { part: tableCell }, `${formatDate(document.created_at)} - ${formatTimeSeconds(document.created_at)}`)));
+            return (h("tr", { class: index === 0 ? "border-bottom border-top" : "border-bottom" }, h("td", { part: tableCell }, document.file_name), h("td", { part: tableCell }, document.file_type), h("td", { part: tableCell }, snakeCaseToHumanReadable(document.document_type)), h("td", { part: tableCell }, `${formatDate(document.created_at)} - ${formatTime(document.created_at)}`)));
         })))))), h("hr", null)));
     }
     static get is() { return "business-documents-on-file"; }

package/dist/collection/components/business-forms/payment-provisioning/business-core-info/business-core-info-form-step.js

@@ -2,15 +2,95 @@ import { h } from "@stencil/core";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../../../api/ComponentError";
 import { makeGetBusiness, makePatchBusiness } from "../payment-provisioning-actions";
 import { BusinessService } from "../../../../api/services/business.service";
+import { CountryCode } from "../../../../utils/country-codes";
+import { businessCoreInfoSchemaUSA, businessCoreInfoSchemaCAN } from "../../schemas/business-core-info-schema";
+import { FormController } from "../../../../ui-components/form/form";
+import { CoreBusinessInfo } from "../../../../api/Business";
+import { BusinessFormStep, businessClassificationOptions } from "../../utils";
+import { PHONE_MASKS } from "../../../../utils/form-input-masks";
+import { heading2, label, inputDisabled, buttonSecondary } from "../../../../styles/parts";
+import { PaymentProvisioningLoading } from "../payment-provisioning-loading";
+import { countryLabels } from "../../utils/country-config";
 export class BusinessCoreInfoFormStep {
+    constructor() {
+        this.errors = {};
+        this.coreInfo = {};
+        this.isLoading = false;
+        this.isEditingTaxId = false;
+        this.getData = () => {
+            if (!this.getBusiness)
+                return;
+            this.formLoading.emit(true);
+            this.isLoading = true;
+            this.getBusiness({
+                onSuccess: (response) => {
+                    this.coreInfo = new CoreBusinessInfo(response.data);
+                    this.formController.setInitialValues(Object.assign({}, this.coreInfo));
+                },
+                onError: ({ error, code, severity }) => {
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity: severity
+                    });
+                },
+                final: () => {
+                    this.formLoading.emit(false);
+                    this.isLoading = false;
+                }
+            });
+        };
+        this.sendData = (onSuccess) => {
+            let submittedData;
+            this.formLoading.emit(true);
+            this.patchBusiness({
+                payload: this.patchPayload,
+                onSuccess: (response) => {
+                    submittedData = response;
+                    onSuccess();
+                    // after successful patch, revert back to read-only for tax id
+                    this.isEditingTaxId = false;
+                },
+                onError: ({ error, code, severity }) => {
+                    submittedData = error;
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity: severity
+                    });
+                },
+                final: () => {
+                    this.stepCompleteEvent.emit({ response: submittedData, formStep: BusinessFormStep.businessInfo });
+                    this.formLoading.emit(false);
+                }
+            });
+        };
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+    }
     propChanged() {
         this.initializeApi();
     }
     async validateAndSubmit({ onSuccess }) {
-        this.coreComponent.validateAndSubmit({ onSuccess });
+        this.formController.validateAndSubmit(() => this.sendData(onSuccess));
+    }
+    get patchPayload() {
+        let formValues = new CoreBusinessInfo(this.formController.values.getValue()).payload;
+        return formValues;
     }
     componentWillLoad() {
         this.initializeApi();
+        const schema = (this.country === CountryCode.CAN)
+            ? businessCoreInfoSchemaCAN(this.allowOptionalFields)
+            : businessCoreInfoSchemaUSA(this.allowOptionalFields);
+        this.formController = new FormController(schema);
+        this.getData();
+    }
+    componentDidLoad() {
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
     }
     initializeApi() {
         if (this.authToken && this.businessId) {
@@ -34,7 +114,16 @@ export class BusinessCoreInfoFormStep {
         }
     }
     render() {
-        return (h("justifi-business-core-info-form-step-core", { key: '1aeaeae1d432883c1e242c066881cabc37097032', businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, country: this.country, ref: el => this.coreComponent = el }));
+        var _a, _b;
+        const coreInfoDefaultValue = this.formController.getInitialValues();
+        if (this.isLoading) {
+            return h(PaymentProvisioningLoading, null);
+        }
+        return (h("form", null, h("fieldset", null, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Business Information")), h("hr", { class: "mt-2" }), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: "legal_name", label: "Business Name", defaultValue: coreInfoDefaultValue.legal_name, errorText: this.errors.legal_name, inputHandler: this.inputHandler, helpText: "Enter this exactly as it appears on your tax records (don't use acronyms or abbreviations unless you registered that way)." })), h("div", { class: "col-12" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, errorText: this.errors.doing_business_as, inputHandler: this.inputHandler, helpText: "Enter this exactly as it appears on your tax records (leave blank if you don't have a registered DBA/trade name)" })), h("div", { class: "col-12 col-md-8" }, h("form-control-select", { name: "classification", label: "Business Classification", options: businessClassificationOptions, defaultValue: coreInfoDefaultValue.classification, errorText: this.errors.classification, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-date", { name: "date_of_incorporation", label: "Date of Registration", defaultValue: coreInfoDefaultValue.date_of_incorporation, errorText: this.errors.date_of_incorporation, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, errorText: this.errors.industry, inputHandler: this.inputHandler, helpText: "Describe what you sell" })), h("div", { class: "col-12 col-md-6" }, (!((_a = this.coreInfo) === null || _a === void 0 ? void 0 : _a.tax_id_last4) || this.isEditingTaxId) ? (h("form-control-number-masked", { name: "tax_id", label: countryLabels[this.country].taxIdLabel, defaultValue: this.isEditingTaxId ? '' : coreInfoDefaultValue.tax_id, errorText: this.errors.tax_id, inputHandler: this.inputHandler, mask: '000000000', helpText: countryLabels[this.country].taxIdHelpText })) : (h("div", null, h("label", { class: "form-label", part: label }, countryLabels[this.country].taxIdLabel), h("div", { class: "input-group mb-3" }, h("input", { type: "text", class: "form-control", part: inputDisabled, value: `****${(_b = this.coreInfo) === null || _b === void 0 ? void 0 : _b.tax_id_last4}`, disabled: true }), h("button", { class: "btn btn-secondary", type: "button", part: buttonSecondary, onClick: () => {
+                this.isEditingTaxId = true;
+                // Clear last4-equivalent and current value if any future conditional validation depends on it
+                this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { tax_id: '', tax_id_last4: null }));
+            } }, "Change"))))), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Business Website URL", defaultValue: coreInfoDefaultValue.website_url, errorText: this.errors.website_url, inputHandler: this.inputHandler, helpText: "Don't have a live website? You can use your social media business page, app store link, or staging site URL." })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Business Email Address", defaultValue: coreInfoDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Business Phone Number", defaultValue: coreInfoDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
     }
     static get is() { return "justifi-business-core-info-form-step"; }
     static get properties() {
@@ -126,7 +215,12 @@ export class BusinessCoreInfoFormStep {
     static get states() {
         return {
             "getBusiness": {},
-            "patchBusiness": {}
+            "patchBusiness": {},
+            "formController": {},
+            "errors": {},
+            "coreInfo": {},
+            "isLoading": {},
+            "isEditingTaxId": {}
         };
     }
     static get events() {
@@ -151,6 +245,42 @@ export class BusinessCoreInfoFormStep {
                         }
                     }
                 }
+            }, {
+                "method": "stepCompleteEvent",
+                "name": "complete-form-step-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentFormStepCompleteEvent",
+                    "resolved": "ComponentFormStepCompleteEvent",
+                    "references": {
+                        "ComponentFormStepCompleteEvent": {
+                            "location": "import",
+                            "path": "../../../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentFormStepCompleteEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "formLoading",
+                "name": "formLoading",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
             }];
     }
     static get methods() {