@justifi/webcomponents 4.10.0-rc.0 → 4.11.0

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/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-form.js

@@ -13,6 +13,52 @@ import { Business } from "../../../api/Business";
  * @exportedPart input-invalid: Invalid state for inputfs
  */
 export class BusinessForm {
+    constructor() {
+        this.sendData = async () => {
+            this.isLoading = true;
+            try {
+                const values = this.formController.values.getValue();
+                const initialValues = this.formController.getInitialValues();
+                const payload = parseBusiness(values, initialValues);
+                const response = await this.api.patch(this.businessEndpoint, JSON.stringify(payload));
+                this.handleReponse(response);
+            }
+            catch (error) {
+                this.errorMessage = BusinessFormServerErrors.patchData;
+            }
+            finally {
+                this.isLoading = false;
+            }
+        };
+        this.fetchData = async () => {
+            this.isLoading = true;
+            try {
+                const response = await this.api.get(this.businessEndpoint);
+                const business = new Business(response.data);
+                this.formController.setInitialValues(Object.assign({}, business));
+            }
+            catch (error) {
+                this.errorMessage = BusinessFormServerErrors.fetchData;
+            }
+            finally {
+                this.isLoading = false;
+            }
+        };
+        this.validateAndSubmit = (event) => {
+            event.preventDefault();
+            this.formController.validateAndSubmit(this.sendData);
+        };
+        this.authToken = undefined;
+        this.businessId = undefined;
+        this.hideErrors = false;
+        this.isLoading = false;
+        this.errorMessage = undefined;
+    }
+    fireClickEvents(event) {
+        console.warn('`clickEvent` is deprecated and will be removed in the next major release. Please use `click-event` instead.');
+        this.clickEventNew.emit(event);
+        this.clickEventOld.emit(event);
+    }
     get disabledState() {
         return this.isLoading;
     }
@@ -22,16 +68,6 @@ export class BusinessForm {
     get businessEndpoint() {
         return `entities/business/${this.businessId}`;
     }
-    constructor() {
-        this.authToken = undefined;
-        this.businessId = undefined;
-        this.hideErrors = false;
-        this.isLoading = false;
-        this.errorMessage = undefined;
-        this.sendData = this.sendData.bind(this);
-        this.fetchData = this.fetchData.bind(this);
-        this.validateAndSubmit = this.validateAndSubmit.bind(this);
-    }
     componentWillLoad() {
         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.';
@@ -43,42 +79,14 @@ export class BusinessForm {
         this.api = Api(this.authToken, config.proxyApiOrigin);
         this.fetchData();
     }
-    async sendData() {
-        this.isLoading = true;
-        try {
-            const values = this.formController.values.getValue();
-            const initialValues = this.formController.getInitialValues();
-            const payload = parseBusiness(values, initialValues);
-            const response = await this.api.patch(this.businessEndpoint, JSON.stringify(payload));
-            this.submitted.emit({ data: response });
-        }
-        catch (error) {
+    handleReponse(response) {
+        if (response.error) {
             this.errorMessage = BusinessFormServerErrors.patchData;
         }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    async fetchData() {
-        this.isLoading = true;
-        try {
-            const response = await this.api.get(this.businessEndpoint);
-            const business = new Business(response.data);
-            this.formController.setInitialValues(Object.assign({}, business));
-        }
-        catch (error) {
-            this.errorMessage = BusinessFormServerErrors.fetchData;
-        }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    validateAndSubmit(event) {
-        event.preventDefault();
-        this.formController.validateAndSubmit(this.sendData);
+        this.submitted.emit({ data: response });
     }
     render() {
-        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-core-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: BusinessFormClickActions.submit }) }, 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-core-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.fireClickEvents({ name: BusinessFormClickActions.submit }) }, this.isLoading ? 'Loading...' : 'Submit'))))));
     }
     static get is() { return "justifi-business-form"; }
     static get originalStyleUrls() {
@@ -155,8 +163,29 @@ export class BusinessForm {
     }
     static get events() {
         return [{
-                "method": "clickEvent",
-                "name": "clickEvent",
+                "method": "submitted",
+                "name": "submitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "BusinessFormSubmitEvent",
+                    "resolved": "BusinessFormSubmitEvent",
+                    "references": {
+                        "BusinessFormSubmitEvent": {
+                            "location": "import",
+                            "path": "../utils/business-form-types",
+                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormSubmitEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "clickEventNew",
+                "name": "click-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -176,8 +205,8 @@ export class BusinessForm {
                     }
                 }
             }, {
-                "method": "submitted",
-                "name": "submitted",
+                "method": "clickEventOld",
+                "name": "clickEvent",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -186,13 +215,13 @@ export class BusinessForm {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "BusinessFormSubmitEvent",
-                    "resolved": "BusinessFormSubmitEvent",
+                    "original": "BusinessFormClickEvent",
+                    "resolved": "BusinessFormClickEvent",
                     "references": {
-                        "BusinessFormSubmitEvent": {
+                        "BusinessFormClickEvent": {
                             "location": "import",
                             "path": "../utils/business-form-types",
-                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormSubmitEvent"
+                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormClickEvent"
                         }
                     }
                 }

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

@@ -20,10 +20,7 @@ export class BusinessRepresentative {
     }
     render() {
         const representativeDefaultValue = this.formController.getInitialValues().representative;
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Representative"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-select", { name: "title", label: "Prefix", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, options: [
-                { label: 'Select Prefix', value: '' },
-                { label: 'Mrs.', value: 'Mrs.' },
-            ], error: this.errors.title, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.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: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12" }, h("label", { part: "label", class: "form-label" }, "Birth Date")), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_day", label: "Day", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_day, error: this.errors.dob_day, inputHandler: this.inputHandler, type: "day" })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_month", label: "Month", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_month, error: this.errors.dob_month, inputHandler: this.inputHandler, type: "month" })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_year", label: "Year", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_year, error: this.errors.dob_year, inputHandler: this.inputHandler, type: "year" })), h("div", { class: "col-12" }, h("form-control-number", { name: "identification_number", label: "SSN", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("justifi-business-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: values => this.onAddressFormUpdate(values) }))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Representative"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-text", { name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, error: this.errors.title, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.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: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12" }, h("label", { part: "label", class: "form-label" }, "Birth Date")), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_day", label: "Day", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_day, error: this.errors.dob_day, inputHandler: this.inputHandler, type: "day" })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_month", label: "Month", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_month, error: this.errors.dob_month, inputHandler: this.inputHandler, type: "month" })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_year", label: "Year", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_year, error: this.errors.dob_year, inputHandler: this.inputHandler, type: "year" })), h("div", { class: "col-12" }, h("form-control-number", { name: "identification_number", label: "SSN", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))))));
     }
     static get is() { return "justifi-business-representative"; }
     static get originalStyleUrls() {

package/dist/collection/components/business-forms/business-form/legal-address-form/legal-address-form.js

@@ -1,4 +1,6 @@
 import { Host, h } from "@stencil/core";
+import StateOptions from "../../../../utils/state-options";
+import { filterPostalInput } from "../../../form/utils";
 /**
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
@@ -19,9 +21,9 @@ export class LegalAddressForm {
         this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { legal_address: Object.assign(Object.assign({}, this.formController.values.getValue().legal_address), { [name]: value }) }));
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         const legalAddressDefaultValue = this.formController.getInitialValues().legal_address;
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Business Legal Address"), h("hr", null), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-12" }, h("form-control-text", { name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, error: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { class: "col-12" }, h("form-control-text", { name: "line2", label: "Address Line 2", inputHandler: (name, value) => this.inputHandler(name, value), defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2 })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, error: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.city })), h("div", { class: "col-12" }, h("form-control-text", { name: "state", label: "State", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, error: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.state })), h("div", { class: "col-12" }, h("form-control-number", { name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, error: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.postal_code })), h("div", { class: "col-12" }, h("form-control-select", { name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, error: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.country,
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Business Legal Address"), h("hr", null), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-12" }, h("form-control-text", { name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, error: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { class: "col-12" }, h("form-control-text", { name: "line2", label: "Address Line 2", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, error: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.line2 })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, error: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.city })), h("div", { class: "col-12" }, h("form-control-select", { name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, error: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.state })), h("div", { class: "col-12" }, h("form-control-text", { name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, error: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: filterPostalInput })), h("div", { class: "col-12" }, h("form-control-select", { name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, error: (_m = (_l = this.errors) === null || _l === void 0 ? void 0 : _l.legal_address) === null || _m === void 0 ? void 0 : _m.country,
             // just for now so we skip handling country specificities
             disabled: true }))))));
     }