@justifi/webcomponents 4.10.0 → 4.12.0

package/dist/collection/api/services/utils.js

@@ -1,6 +1,17 @@
+import { ComponentErrorCodes } from "../ComponentError";
+import { API_ERRORS } from "../shared";
 export const getErrorMessage = (error) => {
     if (typeof error === 'string') {
         return error;
     }
     return error.message;
 };
+export const getErrorCode = (code) => {
+    switch (code) {
+        case API_ERRORS.NOT_AUTHENTICATED:
+            return ComponentErrorCodes.NOT_AUTHENTICATED;
+        // add more cases as needed
+        default:
+            return ComponentErrorCodes.FETCH_ERROR;
+    }
+};

package/dist/collection/api/shared.js

@@ -1 +1,11 @@
-export {};
+// Errors on [capital]/config/locales/en.yml
+// Add more errors as needed
+export const API_ERRORS = {
+    NOT_AUTHENTICATED: 'not_authenticated',
+};
+export const API_NOT_AUTHENTICATED_ERROR = {
+    error: {
+        code: API_ERRORS.NOT_AUTHENTICATED,
+        message: 'Not Authenticated',
+    },
+};

package/dist/collection/collection-manifest.json

@@ -14,15 +14,14 @@
     "components/business-details/representative-details/representative-details.js",
     "components/business-forms/business-form/business-form.js",
     "components/business-forms/business-form/additional-questions/additional-questions.js",
-    "components/business-forms/business-form/business-address/business-address-form.js",
     "components/business-forms/business-form/business-core-info/business-core-info.js",
     "components/business-forms/business-form/business-owners/business-owners.js",
     "components/business-forms/business-form/business-representative/business-representative.js",
     "components/business-forms/business-form/legal-address-form/legal-address-form.js",
     "components/business-forms/owner-form/owner-form.js",
+    "components/business-forms/owner-form/identity-address/identity-address-form.js",
     "components/business-forms/payment-provisioning/payment-provisioning.js",
     "components/business-forms/payment-provisioning/additional-questions/business-additional-questions-form-step.js",
-    "components/business-forms/payment-provisioning/business-address/business-address-form-step.js",
     "components/business-forms/payment-provisioning/business-core-info/business-core-info-form-step.js",
     "components/business-forms/payment-provisioning/business-owners/business-owners-form-step.js",
     "components/business-forms/payment-provisioning/business-representative/business-representative-form-step.js",
@@ -34,7 +33,9 @@
     "components/checkout/new-payment-method.js",
     "components/checkout/payment-method-options.js",
     "components/checkout/saved-payment-method.js",
+    "components/checkout/sezzel-payment-method.js",
     "components/details/details.js",
+    "components/form/form-control-date.js",
     "components/form/form-control-datepart.js",
     "components/form/form-control-monetary.js",
     "components/form/form-control-number-masked.js",

package/dist/collection/components/business-details/additional-questions-details/test/additional-questions.spec.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { AdditionalQuestionsDetails } from "../additional-questions-details";
 import { Business } from "../../../../api/Business";
-import mockedBusinessDetails from "../../../../api/mockData/mockBusinessDetails.json";
+import mockedBusinessDetails from "../../../../../../../mockData/mockBusinessDetails.json";
 describe('additional-questions-details', () => {
     it('should render additional-questions-details', async () => {
         const businessDetails = new Business(mockedBusinessDetails.data);

package/dist/collection/components/business-details/business-details-core.js

@@ -25,10 +25,14 @@ export class BusinessDetailsCore {
                 this.business = business;
                 this.renderState = RENDER_STATES.READY;
             },
-            onError: ({ error }) => {
-                console.error(error);
+            onError: ({ error, code, severity }) => {
                 this.errorMessage = error;
                 this.renderState = RENDER_STATES.ERROR;
+                this.errorEvent.emit({
+                    errorCode: code,
+                    message: error,
+                    severity,
+                });
             }
         });
     }
@@ -83,4 +87,28 @@ export class BusinessDetailsCore {
             "errorMessage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
 }

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

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import { ErrorState } from "../details/utils";
 import { BusinessService } from "../../api/services/business.service";
 import { makeGetBusiness } from "./get-business";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 /**
  *
  * @exportedPart detail-section
@@ -23,6 +24,11 @@ export class BusinessDetails {
     initializeGetBusiness() {
         if (!this.businessId || !this.authToken) {
             this.errorMessage = 'Invalid business id or auth token';
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                message: this.errorMessage,
+                severity: ComponentErrorSeverity.ERROR,
+            });
             return;
         }
         this.getBusiness = makeGetBusiness({
@@ -83,4 +89,28 @@ export class BusinessDetails {
             "getBusiness": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
 }

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

@@ -6,10 +6,10 @@ export class GenericInfoDetails {
         this.business = undefined;
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (!this.business)
             return null;
-        return (h(Host, null, h(DetailSectionTitle, { sectionTitle: "Business Generic Info Details" }), h("div", { class: "d-table gap-2 w-100" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Legal Name", value: (_a = this.business) === null || _a === void 0 ? void 0 : _a.legal_name }), h(DetailItem, { title: "Doing Business As (DBA)", value: (_b = this.business) === null || _b === void 0 ? void 0 : _b.doing_business_as }), h(DetailItem, { title: "Business Type", value: snakeCaseToHumanReadable((_c = this.business) === null || _c === void 0 ? void 0 : _c.business_type) }), h(DetailItem, { title: "Business Structure", value: snakeCaseToHumanReadable((_d = this.business) === null || _d === void 0 ? void 0 : _d.business_structure) }), h(DetailItem, { title: "Industry", value: (_e = this.business) === null || _e === void 0 ? void 0 : _e.industry })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Tax ID", value: (_f = this.business) === null || _f === void 0 ? void 0 : _f.tax_id }), h(DetailItem, { title: "Website URL", value: (_g = this.business) === null || _g === void 0 ? void 0 : _g.website_url }), h(DetailItem, { title: "Email Address", value: (_h = this.business) === null || _h === void 0 ? void 0 : _h.email }), h(DetailItem, { title: "Phone Number", value: (_j = this.business) === null || _j === void 0 ? void 0 : _j.phone }))))));
+        return (h(Host, null, h(DetailSectionTitle, { sectionTitle: "Business Generic Info Details" }), h("div", { class: "d-table gap-2 w-100" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Legal Name", value: (_a = this.business) === null || _a === void 0 ? void 0 : _a.legal_name }), h(DetailItem, { title: "Doing Business As (DBA)", value: (_b = this.business) === null || _b === void 0 ? void 0 : _b.doing_business_as }), h(DetailItem, { title: "Business Type", value: snakeCaseToHumanReadable((_c = this.business) === null || _c === void 0 ? void 0 : _c.business_type) }), h(DetailItem, { title: "Industry", value: (_d = this.business) === null || _d === void 0 ? void 0 : _d.industry })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Tax ID", value: (_e = this.business) === null || _e === void 0 ? void 0 : _e.tax_id }), h(DetailItem, { title: "Website URL", value: (_f = this.business) === null || _f === void 0 ? void 0 : _f.website_url }), h(DetailItem, { title: "Email Address", value: (_g = this.business) === null || _g === void 0 ? void 0 : _g.email }), h(DetailItem, { title: "Phone Number", value: (_h = this.business) === null || _h === void 0 ? void 0 : _h.phone }))))));
     }
     static get is() { return "generic-info-details"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/business-details/generic-info-details/test/generic-info-details.spec.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { Business } from "../../../../api/Business";
 import { GenericInfoDetails } from "../generic-info-details";
-import mockedBusinessDetails from "../../../../api/mockData/mockBusinessDetails.json";
+import mockedBusinessDetails from "../../../../../../../mockData/mockBusinessDetails.json";
 describe('GenericInfoDetails', () => {
     it('should render', async () => {
         const businessDetails = new Business(mockedBusinessDetails.data);

package/dist/collection/components/business-details/get-business.js

@@ -1,6 +1,8 @@
 import { Business } from "../../api/Business";
-import { getErrorMessage } from "../../api/services/utils";
+import { ComponentErrorSeverity } from "../../api/ComponentError";
+import { getErrorCode, getErrorMessage } from "../../api/services/utils";
 export const makeGetBusiness = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
+    var _a;
     try {
         const response = await service.fetchBusiness(id, authToken);
         if (!response.error) {
@@ -8,10 +10,20 @@ export const makeGetBusiness = ({ id, authToken, service }) => async ({ onSucces
         }
         else {
             const responseError = getErrorMessage(response.error);
-            return onError({ error: responseError });
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     catch (error) {
-        return onError({ error: error.message || error });
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };

package/dist/collection/components/business-details/legal-address-details/test/legal-address-details.spec.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { Business } from "../../../../api/Business";
 import { LegalAddressDetails } from "../legal-address-details";
-import mockedBusinessDetails from "../../../../api/mockData/mockBusinessDetails.json";
+import mockedBusinessDetails from "../../../../../../../mockData/mockBusinessDetails.json";
 describe('LegalAddressDetails', () => {
     it('should render', async () => {
         const businessDetails = new Business(mockedBusinessDetails.data);

package/dist/collection/components/business-details/owner-details/test/owner-details.spec.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { Business } from "../../../../api/Business";
-import mockedBusinessDetails from "../../../../api/mockData/mockBusinessDetails.json";
+import mockedBusinessDetails from "../../../../../../../mockData/mockBusinessDetails.json";
 import { OwnerDetails } from "../owner-details";
 describe('owner-details', () => {
     it('should render owner-details', async () => {

package/dist/collection/components/business-details/representative-details/test/representative-details.spec.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { Business } from "../../../../api/Business";
-import mockedBusinessDetails from "../../../../api/mockData/mockBusinessDetails.json";
+import mockedBusinessDetails from "../../../../../../../mockData/mockBusinessDetails.json";
 import { JustifiRepresentativeDetails } from "../representative-details";
 describe('RepresentativeDetails', () => {
     it('should render', async () => {

package/dist/collection/components/business-details/test/busines-details-core.spec.js

@@ -1,22 +1,20 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { BusinessDetailsCore } from "../business-details-core";
 import { makeGetBusiness } from "../get-business";
-import mockBusinessDetails from "./../../../api/mockData/mockBusinessDetails.json";
+import mockBusinessDetails from "./../../../../../../mockData/mockBusinessDetails.json";
 import { Business } from "../../../api/Business";
+import { API_NOT_AUTHENTICATED_ERROR } from "../../../api/shared";
 describe('BusinessDetailsCore', () => {
     it('should display loading state correclty', async () => {
         const page = await newSpecPage({
             components: [BusinessDetailsCore],
-            html: '<business-details-core></business-details-core>',
+            template: () => h("business-details-core", null),
         });
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
     it('should display error state correctly', async () => {
-        const page = await newSpecPage({
-            components: [BusinessDetailsCore],
-            html: '<business-details-core></business-details-core>',
-        });
         const getBusiness = makeGetBusiness({
             id: '',
             authToken: '',
@@ -24,17 +22,14 @@ describe('BusinessDetailsCore', () => {
                 fetchBusiness: async () => ({ error: 'error' }),
             },
         });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getBusiness = getBusiness;
-        page.rootInstance.fetchData();
+        const page = await newSpecPage({
+            components: [BusinessDetailsCore],
+            template: () => h("business-details-core", { getBusiness: getBusiness }),
+        });
         await page.waitForChanges();
         expect(page.root).toMatchSnapshot();
     });
     it('should set business details correctly to state', async () => {
-        const page = await newSpecPage({
-            components: [BusinessDetailsCore],
-            html: '<business-details-core></business-details-core>',
-        });
         const getBusiness = makeGetBusiness({
             id: '',
             authToken: '',
@@ -42,12 +37,57 @@ describe('BusinessDetailsCore', () => {
                 fetchBusiness: async () => Promise.resolve(mockBusinessDetails),
             },
         });
-        page.rootInstance.componentWillLoad = () => { };
-        page.rootInstance.getBusiness = getBusiness;
-        page.rootInstance.fetchData();
+        const page = await newSpecPage({
+            components: [BusinessDetailsCore],
+            template: () => h("business-details-core", { getBusiness: getBusiness }),
+        });
         await page.waitForChanges();
         const expectedBusiness = new Business(mockBusinessDetails.data);
         expect(page.rootInstance.business).toEqual(expectedBusiness);
         expect(page.root).toMatchSnapshot();
     });
+    it('should emit error event when fetch fails', async () => {
+        const getBusiness = makeGetBusiness({
+            authToken: 'abc',
+            id: 'abc',
+            service: {
+                fetchBusiness: jest.fn().mockRejectedValue(new Error('Fetch error')),
+            },
+        });
+        const errorSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [BusinessDetailsCore],
+            template: () => h("business-details-core", { getBusiness: getBusiness, "onError-event": errorSpy }),
+        });
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'fetch-error',
+                message: 'Fetch error',
+                severity: 'error',
+            }
+        }));
+    });
+    it('should emit error event when API returns error', async () => {
+        const getBusiness = makeGetBusiness({
+            authToken: 'abc',
+            id: 'abc',
+            service: {
+                fetchBusiness: jest.fn().mockResolvedValue(API_NOT_AUTHENTICATED_ERROR),
+            },
+        });
+        const errorSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [BusinessDetailsCore],
+            template: () => h("business-details-core", { getBusiness: getBusiness, "onError-event": errorSpy }),
+        });
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'not-authenticated',
+                message: 'Not Authenticated',
+                severity: 'error',
+            }
+        }));
+    });
 });

package/dist/collection/components/business-details/test/business-details.spec.js

@@ -1,3 +1,4 @@
+import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { BusinessDetails } from "../business-details";
 import { BusinessDetailsCore } from "../business-details-core";
@@ -5,7 +6,7 @@ describe('justifi-business-details', () => {
     it('initializes getBusiness on load with valid props', async () => {
         const page = await newSpecPage({
             components: [BusinessDetails],
-            html: `<justifi-business-details business-id="123" auth-token="token" />`,
+            template: () => h("justifi-business-details", { "business-id": "123", "auth-token": "token" }),
         });
         page.waitForChanges();
         expect(page.rootInstance.getBusiness).toBeDefined();
@@ -14,7 +15,7 @@ describe('justifi-business-details', () => {
     it('sets an error message with invalid props', async () => {
         const page = await newSpecPage({
             components: [BusinessDetails],
-            html: `<justifi-business-details></justifi-business-details>`, // No props provided
+            template: () => h("justifi-business-details", null), // No props provided
         });
         page.waitForChanges();
         expect(page.rootInstance.errorMessage).toBe('Invalid business id or auth token');
@@ -22,7 +23,7 @@ describe('justifi-business-details', () => {
     it('renders the error state when there is an error message', async () => {
         const page = await newSpecPage({
             components: [BusinessDetails, BusinessDetailsCore],
-            html: `<justifi-business-details />`,
+            template: () => h("justifi-business-details", null),
         });
         await page.waitForChanges();
         expect(page.rootInstance.errorMessage).toBe('Invalid business id or auth token');
@@ -31,10 +32,25 @@ describe('justifi-business-details', () => {
     it('renders business-details-core when there is no error message', async () => {
         const page = await newSpecPage({
             components: [BusinessDetails, BusinessDetailsCore],
-            html: `<justifi-business-details business-id="123" auth-token="token" />`,
+            template: () => h("justifi-business-details", { "business-id": "123", "auth-token": "token" }),
         });
         page.waitForChanges();
         const core = page.root.shadowRoot.querySelector('business-details-core');
         expect(core).not.toBeNull();
     });
+    it('emits an error event when there is no auth token', async () => {
+        const errorSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [BusinessDetails],
+            template: () => h("justifi-business-details", { "business-id": "123", "onError-event": errorSpy }),
+        });
+        page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'missing-props',
+                message: 'Invalid business id or auth token',
+                severity: 'error',
+            }
+        }));
+    });
 });

package/dist/collection/components/business-details/test/get-business.spec.js

@@ -1,6 +1,7 @@
 import { makeGetBusiness } from "../get-business";
-import mockResponse from "../../../api/mockData/mockBusinessDetails.json";
+import mockResponse from "../../../../../../mockData/mockBusinessDetails.json";
 import { Business } from "../../../api/Business";
+import { API_NOT_AUTHENTICATED_ERROR } from "../../../api/shared";
 // Mocks
 jest.mock('../../../api/services/utils.ts', () => ({
     getErrorMessage: jest.fn(),
@@ -31,9 +32,7 @@ describe('makeGetBusiness', () => {
         expect(onError).not.toHaveBeenCalled();
     });
     it('calls onError with an error message on fetch error', async () => {
-        const error = 'Test error';
-        const responseError = { error };
-        mockService.fetchBusiness.mockResolvedValue(responseError);
+        mockService.fetchBusiness.mockResolvedValue(API_NOT_AUTHENTICATED_ERROR);
         const onSuccess = jest.fn();
         const onError = jest.fn();
         const getBusiness = makeGetBusiness({
@@ -42,7 +41,11 @@ describe('makeGetBusiness', () => {
             service: mockService,
         });
         await getBusiness({ onSuccess, onError });
-        expect(onError).toHaveBeenCalledWith({ error });
+        expect(onError).toHaveBeenCalledWith({
+            error: 'Not Authenticated',
+            code: 'not-authenticated',
+            severity: 'error',
+        });
     });
     it('calls onError with an error message on fetch exception', async () => {
         const error = new Error('Network error');
@@ -55,6 +58,10 @@ describe('makeGetBusiness', () => {
             service: mockService,
         });
         await getBusiness({ onSuccess, onError });
-        expect(onError).toHaveBeenCalledWith({ error: error.message });
+        expect(onError).toHaveBeenCalledWith({
+            error: error.message,
+            code: 'fetch-error',
+            severity: 'error',
+        });
     });
 });

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { BusinessTypeOptions, BusinessStructureOptions } from "../../utils/business-form-select-options";
+import { BusinessTypeOptions } from "../../utils/business-form-types";
 import { PHONE_MASKS, TAX_ID_MASKS } from "../../../../utils/form-input-masks";
 import { CoreBusinessInfo } from "../../../../api/Business";
 /**
@@ -30,7 +30,7 @@ export class BusinessCoreInfo {
     }
     render() {
         const coreInfoDefaultValue = 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: coreInfoDefaultValue.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: coreInfoDefaultValue.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: coreInfoDefaultValue.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: coreInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.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: coreInfoDefaultValue.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: coreInfoDefaultValue.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: coreInfoDefaultValue.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" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.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: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.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: coreInfoDefaultValue.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: coreInfoDefaultValue.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: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
     }
     static get is() { return "justifi-business-core-info"; }
     static get originalStyleUrls() {