@justifi/webcomponents 4.7.5 → 4.8.0

package/dist/collection/components/business-form/business-form-stepped.js

@@ -4,13 +4,9 @@ import businessFormSchema from "./business-form-schema";
 import { Api } from "../../api";
 import { parseForPatching } from "./helpers";
 import { config } from "../../../config";
-const componentStepMapping = {
-    0: (formController) => h("justifi-business-generic-info", { formController: formController }),
-    1: (formController) => h("justifi-legal-address-form", { formController: formController }),
-    2: (formController) => h("justifi-additional-questions", { formController: formController }),
-    3: (formController) => h("justifi-business-representative", { formController: formController }),
-    4: (formController) => h("justifi-business-owners", { formController: formController })
-};
+import { FormAlert } from "../form/utils";
+import { ClickEvents } from "./BusinessFormEventTypes";
+import { Business } from "../../api/Business";
 /**
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
@@ -18,41 +14,52 @@ const componentStepMapping = {
  */
 export class BusinessFormStepped {
     constructor() {
+        this.componentStepMapping = {
+            0: (formController) => h("justifi-business-generic-info", { formController: formController }),
+            1: (formController) => h("justifi-legal-address-form", { formController: formController }),
+            2: (formController) => h("justifi-additional-questions", { formController: formController }),
+            3: (formController) => h("justifi-business-representative", { formController: formController })
+        };
         this.authToken = undefined;
-        this.accountId = undefined;
         this.businessId = undefined;
         this.testMode = false;
+        this.hideErrors = false;
         this.isLoading = false;
         this.currentStep = 0;
         this.totalSteps = 4;
-        this.serverError = undefined;
+        this.serverError = false;
+        this.errorMessage = '';
         this.sendData = this.sendData.bind(this);
         this.fetchData = this.fetchData.bind(this);
     }
+    get disabledState() {
+        return this.isLoading;
+    }
+    get showErrors() {
+        return this.serverError && !this.hideErrors;
+    }
+    get businessEndpoint() {
+        return `entities/business/${this.businessId}`;
+    }
     componentWillLoad() {
-        if (!this.authToken) {
-            console.warn('Warning: Missing auth-token. The form will not be functional without it.');
-        }
+        const missingAuthTokenMessage = 'Warning: Missing auth-token. The form will not be functional without it.';
+        const missingBusinessIdMessage = 'Warning: Missing business-id. The form requires an existing business-id to function.';
+        if (!this.authToken)
+            console.error(missingAuthTokenMessage);
+        if (!this.businessId)
+            console.error(missingBusinessIdMessage);
         this.formController = new FormController(businessFormSchema);
         this.api = Api(this.authToken, config.proxyApiOrigin);
-        this.totalSteps = Object.keys(componentStepMapping).length - 1;
-        if (this.businessId) {
-            this.fetchData(this.businessId);
-        }
-        else {
-            this.formController.setInitialValues({
-                legal_address: {
-                    country: 'US',
-                },
-            });
-        }
+        this.totalSteps = Object.keys(this.componentStepMapping).length - 1;
+        this.fetchData();
     }
     handleResponse(response, onSuccess) {
         if (response.error) {
-            this.serverError = response.error.message;
+            this.serverError = true;
+            this.errorMessage = response.error.message;
         }
         else {
-            this.serverError = '';
+            this.serverError = false;
             this.businessId = response.data.id;
             this.formController.setInitialValues(response.data);
             onSuccess();
@@ -66,33 +73,31 @@ export class BusinessFormStepped {
         }
         this.isLoading = true;
         try {
-            const data = this.formController.values.getValue();
-            // Conditionally making either POST or PATCH request
-            if (this.businessId) {
-                const payload = parseForPatching(data);
-                const response = await this.api.patch(`entities/business/${this.businessId}`, JSON.stringify(payload), { account_id: this.accountId });
-                this.handleResponse(response, onSuccess);
-            }
-            else {
-                const response = await this.api.post('entities/business', JSON.stringify(data), { account_id: this.accountId });
-                this.handleResponse(response, onSuccess);
-            }
+            const values = this.formController.values.getValue();
+            const initialValues = this.formController.getInitialValues();
+            const payload = parseForPatching(values, initialValues);
+            const response = await this.api.patch(this.businessEndpoint, JSON.stringify(payload));
+            this.handleResponse(response, onSuccess);
+            this.submitted.emit({ data: response.data });
         }
         catch (error) {
-            console.error('Error sending data:', error);
+            this.serverError = true;
+            this.errorMessage = error.message;
         }
         finally {
             this.isLoading = false;
         }
     }
-    async fetchData(businessId) {
+    async fetchData() {
         this.isLoading = true;
         try {
-            const response = await this.api.get(`entities/business/${businessId}`);
-            this.formController.setInitialValues(response.data);
+            const response = await this.api.get(this.businessEndpoint);
+            const business = new Business(response.data);
+            this.formController.setInitialValues(business);
         }
         catch (error) {
-            console.error('Error fetching data:', error);
+            this.serverError = true;
+            this.errorMessage = `Error fetching data: ${error.message}`;
         }
         finally {
             this.isLoading = false;
@@ -106,22 +111,24 @@ export class BusinessFormStepped {
         return this.currentStep > 0;
     }
     previousStepButtonOnClick() {
+        this.clickEvent.emit({ name: ClickEvents.previousStep });
         this.sendData(() => this.currentStep--);
     }
     showNextStepButton() {
         return this.currentStep < this.totalSteps;
     }
-    nextStepButtonOnClick() {
+    nextStepButtonOnClick(clickEventName) {
+        this.clickEvent.emit({ name: clickEventName });
         this.sendData(() => this.currentStep++);
     }
     showSubmitButton() {
         return this.currentStep === this.totalSteps;
     }
     currentStepComponent() {
-        return componentStepMapping[this.currentStep](this.formController);
+        return this.componentStepMapping[this.currentStep](this.formController);
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("h1", null, "Business Information"), this.serverError && (h("div", { class: "alert alert-danger", role: "alert" }, this.serverError)), h("form", { onSubmit: this.validateAndSubmit }, h("div", { class: "my-4" }, this.currentStepComponent()), h("div", { class: "d-flex justify-content-between align-items-center" }, h("div", { class: "d-flex align-items-center" }, "Step ", this.currentStep + 1, " of ", this.totalSteps + 1), h("div", { class: "d-flex gap-2" }, this.showPreviousStepButton() && (h("button", { type: "button", class: "btn btn-secondary", onClick: () => this.previousStepButtonOnClick(), disabled: this.isLoading }, "Previous")), this.showNextStepButton() && (h("button", { type: "button", class: "btn btn-primary", onClick: () => this.nextStepButtonOnClick(), disabled: this.isLoading }, "Next")), this.showSubmitButton() && (h("button", { type: "submit", class: "btn btn-primary", onClick: () => this.nextStepButtonOnClick(), disabled: this.isLoading }, "Submit")))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("h1", null, "Business Information"), this.showErrors && FormAlert(this.errorMessage), h("form", { onSubmit: this.validateAndSubmit }, h("div", { class: "my-4" }, this.currentStepComponent()), h("div", { class: "d-flex justify-content-between align-items-center" }, h("div", { class: "d-flex align-items-center" }, "Step ", this.currentStep + 1, " of ", this.totalSteps + 1), h("div", { class: "d-flex gap-2" }, this.showPreviousStepButton() && (h("button", { type: "button", class: "btn btn-secondary", onClick: () => this.previousStepButtonOnClick(), disabled: this.isLoading }, "Previous")), this.showNextStepButton() && (h("button", { type: "button", class: "btn btn-primary", onClick: () => this.nextStepButtonOnClick(ClickEvents.nextStep), disabled: this.disabledState }, "Next")), this.showSubmitButton() && (h("button", { type: "submit", class: "btn btn-primary", onClick: () => this.nextStepButtonOnClick(ClickEvents.submit), disabled: this.disabledState }, "Submit")))))));
     }
     static get is() { return "justifi-business-form-stepped"; }
     static get originalStyleUrls() {
@@ -153,7 +160,7 @@ export class BusinessFormStepped {
                 "attribute": "auth-token",
                 "reflect": false
             },
-            "accountId": {
+            "businessId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -167,27 +174,28 @@ export class BusinessFormStepped {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "account-id",
+                "attribute": "business-id",
                 "reflect": false
             },
-            "businessId": {
-                "type": "string",
+            "testMode": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "business-id",
-                "reflect": false
+                "attribute": "test-mode",
+                "reflect": false,
+                "defaultValue": "false"
             },
-            "testMode": {
+            "hideErrors": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -196,12 +204,12 @@ export class BusinessFormStepped {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "test-mode",
+                "attribute": "hide-errors",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -212,7 +220,41 @@ export class BusinessFormStepped {
             "isLoading": {},
             "currentStep": {},
             "totalSteps": {},
-            "serverError": {}
+            "serverError": {},
+            "errorMessage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "clickEvent",
+                "name": "clickEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ data?: any, name: string }",
+                    "resolved": "{ data?: any; name: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "submitted",
+                "name": "submitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ data: any }",
+                    "resolved": "{ data: any; }",
+                    "references": {}
+                }
+            }];
+    }
 }

package/dist/collection/components/business-form/business-form.css

@@ -7727,6 +7727,101 @@ progress {
     display: none !important;
   }
 }
+.alert {
+  --bs-alert-bg: transparent;
+  --bs-alert-padding-x: 1rem;
+  --bs-alert-padding-y: 1rem;
+  --bs-alert-margin-bottom: 1rem;
+  --bs-alert-color: inherit;
+  --bs-alert-border-color: transparent;
+  --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
+  --bs-alert-border-radius: var(--bs-border-radius);
+  --bs-alert-link-color: inherit;
+  position: relative;
+  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
+  margin-bottom: var(--bs-alert-margin-bottom);
+  color: var(--bs-alert-color);
+  background-color: var(--bs-alert-bg);
+  border: var(--bs-alert-border);
+  border-radius: var(--bs-alert-border-radius);
+}
+
+.alert-heading {
+  color: inherit;
+}
+
+.alert-link {
+  font-weight: 700;
+  color: var(--bs-alert-link-color);
+}
+
+.alert-dismissible {
+  padding-right: 3rem;
+}
+.alert-dismissible .btn-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  padding: 1.25rem 1rem;
+}
+
+.alert-primary {
+  --bs-alert-color: var(--bs-primary-text-emphasis);
+  --bs-alert-bg: var(--bs-primary-bg-subtle);
+  --bs-alert-border-color: var(--bs-primary-border-subtle);
+  --bs-alert-link-color: var(--bs-primary-text-emphasis);
+}
+
+.alert-secondary {
+  --bs-alert-color: var(--bs-secondary-text-emphasis);
+  --bs-alert-bg: var(--bs-secondary-bg-subtle);
+  --bs-alert-border-color: var(--bs-secondary-border-subtle);
+  --bs-alert-link-color: var(--bs-secondary-text-emphasis);
+}
+
+.alert-success {
+  --bs-alert-color: var(--bs-success-text-emphasis);
+  --bs-alert-bg: var(--bs-success-bg-subtle);
+  --bs-alert-border-color: var(--bs-success-border-subtle);
+  --bs-alert-link-color: var(--bs-success-text-emphasis);
+}
+
+.alert-info {
+  --bs-alert-color: var(--bs-info-text-emphasis);
+  --bs-alert-bg: var(--bs-info-bg-subtle);
+  --bs-alert-border-color: var(--bs-info-border-subtle);
+  --bs-alert-link-color: var(--bs-info-text-emphasis);
+}
+
+.alert-warning {
+  --bs-alert-color: var(--bs-warning-text-emphasis);
+  --bs-alert-bg: var(--bs-warning-bg-subtle);
+  --bs-alert-border-color: var(--bs-warning-border-subtle);
+  --bs-alert-link-color: var(--bs-warning-text-emphasis);
+}
+
+.alert-danger {
+  --bs-alert-color: var(--bs-danger-text-emphasis);
+  --bs-alert-bg: var(--bs-danger-bg-subtle);
+  --bs-alert-border-color: var(--bs-danger-border-subtle);
+  --bs-alert-link-color: var(--bs-danger-text-emphasis);
+}
+
+.alert-light {
+  --bs-alert-color: var(--bs-light-text-emphasis);
+  --bs-alert-bg: var(--bs-light-bg-subtle);
+  --bs-alert-border-color: var(--bs-light-border-subtle);
+  --bs-alert-link-color: var(--bs-light-text-emphasis);
+}
+
+.alert-dark {
+  --bs-alert-color: var(--bs-dark-text-emphasis);
+  --bs-alert-bg: var(--bs-dark-bg-subtle);
+  --bs-alert-border-color: var(--bs-dark-border-subtle);
+  --bs-alert-link-color: var(--bs-dark-text-emphasis);
+}
+
 :host {
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;

package/dist/collection/components/business-form/business-form.js

@@ -4,66 +4,73 @@ import businessFormSchema from "./business-form-schema";
 import { Api } from "../../api";
 import { parseForPatching } from "./helpers";
 import { config } from "../../../config";
+import { FormAlert } from "../form/utils";
+import { ClickEvents } from "./BusinessFormEventTypes";
+import { Business } from "../../api/Business";
 /**
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
  * @exportedPart input-invalid: Invalid state for inputfs
  */
 export class BusinessForm {
+    get disabledState() {
+        return this.isLoading;
+    }
+    get showErrors() {
+        return this.serverError && !this.hideErrors;
+    }
+    get businessEndpoint() {
+        return `entities/business/${this.businessId}`;
+    }
     constructor() {
         this.authToken = undefined;
         this.businessId = undefined;
+        this.hideErrors = false;
         this.isLoading = false;
+        this.serverError = false;
+        this.errorMessage = '';
         this.sendData = this.sendData.bind(this);
         this.fetchData = this.fetchData.bind(this);
+        this.validateAndSubmit = this.validateAndSubmit.bind(this);
     }
     componentWillLoad() {
-        if (!this.authToken) {
-            console.warn('Warning: Missing auth-token. The form will not be functional without it.');
-        }
+        const missingAuthTokenMessage = 'Warning: Missing auth-token. The form will not be functional without it.';
+        const missingBusinessIdMessage = 'Warning: Missing business-id. The form requires an existing business-id to function.';
+        if (!this.authToken)
+            console.error(missingAuthTokenMessage);
+        if (!this.businessId)
+            console.error(missingBusinessIdMessage);
         this.formController = new FormController(businessFormSchema);
         this.api = Api(this.authToken, config.proxyApiOrigin);
-        if (this.businessId) {
-            this.fetchData(this.businessId);
-        }
-        else {
-            this.formController.setInitialValues({
-                legal_address: {
-                    country: 'US',
-                },
-            });
-        }
+        this.fetchData();
     }
     async sendData() {
         this.isLoading = true;
         try {
-            const data = this.formController.values.getValue();
-            // Conditionally making either POST or PATCH request
-            if (this.businessId) {
-                const payload = parseForPatching(data);
-                const response = await this.api.patch(`entities/business/${this.businessId}`, JSON.stringify(payload));
-                console.log('Server response from PATCH:', response);
-            }
-            else {
-                const response = await this.api.post('entities/business', JSON.stringify(data));
-                console.log('Server response from POST:', response);
-            }
+            const values = this.formController.values.getValue();
+            const initialValues = this.formController.getInitialValues();
+            const payload = parseForPatching(values, initialValues);
+            const response = await this.api.patch(this.businessEndpoint, JSON.stringify(payload));
+            this.submitted.emit({ data: response });
         }
         catch (error) {
-            console.error('Error sending data:', error);
+            this.serverError = true;
+            this.errorMessage = error.message;
         }
         finally {
             this.isLoading = false;
         }
     }
-    async fetchData(businessId) {
+    async fetchData() {
         this.isLoading = true;
         try {
-            const response = await this.api.get(`entities/business/${businessId}`);
-            this.formController.setInitialValues(response.data);
+            const response = await this.api.get(this.businessEndpoint);
+            const business = new Business(response.data);
+            this.formController.setInitialValues(business);
         }
         catch (error) {
-            console.error('Error fetching data:', error);
+            this.serverError = true;
+            this.errorMessage = `Error fetching data: ${error.message}`;
         }
         finally {
             this.isLoading = false;
@@ -74,7 +81,7 @@ export class BusinessForm {
         this.formController.validateAndSubmit(this.sendData);
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", { onSubmit: event => this.validateAndSubmit(event) }, h("div", { class: "row gap-3" }, h("div", { class: "col-12 mb-4" }, h("h1", null, "Business Information")), h("div", { class: "col-12 mb-4" }, h("justifi-business-generic-info", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-legal-address-form", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-additional-questions", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-representative", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-owners", { isEditing: !!this.businessId, formController: this.formController })), h("div", { class: "col-12 d-flex flex-row-reverse" }, h("button", { type: "submit", class: "btn btn-primary jfi-submit-button", disabled: !this.authToken || this.isLoading }, this.isLoading ? 'Loading...' : 'Submit'))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", { onSubmit: this.validateAndSubmit }, h("div", { class: "row gap-3" }, h("div", { class: "col-12 mb-4" }, h("h1", null, "Business Information")), this.showErrors && FormAlert(this.errorMessage), h("div", { class: "col-12 mb-4" }, h("justifi-business-generic-info", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-legal-address-form", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-additional-questions", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-representative", { formController: this.formController })), h("div", { class: "col-12 d-flex flex-row-reverse" }, h("button", { type: "submit", class: "btn btn-primary jfi-submit-button", disabled: this.disabledState, onClick: () => this.clickEvent.emit({ name: ClickEvents.submit }) }, this.isLoading ? 'Loading...' : 'Submit'))))));
     }
     static get is() { return "justifi-business-form"; }
     static get originalStyleUrls() {
@@ -115,19 +122,72 @@ export class BusinessForm {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "attribute": "business-id",
                 "reflect": false
+            },
+            "hideErrors": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-errors",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "isLoading": {}
+            "isLoading": {},
+            "serverError": {},
+            "errorMessage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "clickEvent",
+                "name": "clickEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ data?: any, name: string }",
+                    "resolved": "{ data?: any; name: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "submitted",
+                "name": "submitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ data: any }",
+                    "resolved": "{ data: any; }",
+                    "references": {}
+                }
+            }];
+    }
 }

package/dist/collection/components/business-form/business-generic-info/business-generic-info.js

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { BusinessStructureOptions, BusinessTypeOptions, } from "../business-form-schema";
-import { PHONE_MASKS } from "../../../utils/phone-masks";
+import { PHONE_MASKS, TAX_ID_MASKS } from "../../../utils/form-input-masks";
+import { CoreBusinessInfo } from "../../../api/Business";
 /**
  *
  * The difference between this component and business-generic-info-details
@@ -15,9 +16,11 @@ export class BusinessGenericInfo {
     constructor() {
         this.formController = undefined;
         this.errors = {};
+        this.genericInfo = {};
         this.inputHandler = this.inputHandler.bind(this);
     }
     componentDidLoad() {
+        this.formController.values.subscribe(values => (this.genericInfo = Object.assign({}, new CoreBusinessInfo(values))));
         this.formController.errors.subscribe(errors => {
             this.errors = Object.assign({}, errors);
         });
@@ -27,7 +30,7 @@ export class BusinessGenericInfo {
     }
     render() {
         const genericInfoDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: genericInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: genericInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: genericInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_structure", label: "Business Structure", options: BusinessStructureOptions, defaultValue: genericInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: genericInfoDefaultValue.industry, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number", { name: "tax_id", label: "Tax ID", defaultValue: genericInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: genericInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: genericInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: genericInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: genericInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: genericInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: genericInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_structure", label: "Business Structure", options: BusinessStructureOptions, defaultValue: genericInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: genericInfoDefaultValue.industry, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: genericInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: genericInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: genericInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: genericInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
     }
     static get is() { return "justifi-business-generic-info"; }
     static get originalStyleUrls() {
@@ -67,7 +70,8 @@ export class BusinessGenericInfo {
     }
     static get states() {
         return {
-            "errors": {}
+            "errors": {},
+            "genericInfo": {}
         };
     }
 }