@justifi/webcomponents 4.10.0 → 4.12.0

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

@@ -13,6 +13,60 @@ import { Business } from "../../../api/Business";
  * @exportedPart input-invalid: Invalid state for inputfs
  */
 export class BusinessForm {
+    constructor() {
+        this.instantiateBusiness = (data) => {
+            const business = new Business(data);
+            this.formController.setInitialValues(Object.assign({}, business));
+        };
+        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);
+                this.instantiateBusiness(response.data);
+            }
+            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.formTitle = 'Business Information';
+        this.removeTitle = 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 title() {
+        return this.removeTitle ? '' : this.formTitle;
+    }
     get disabledState() {
         return this.isLoading;
     }
@@ -22,16 +76,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 +87,15 @@ 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 });
+        this.instantiateBusiness(response.data);
     }
     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, this.title)), 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() {
@@ -144,6 +161,42 @@ export class BusinessForm {
                 "attribute": "hide-errors",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "formTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "form-title",
+                "reflect": false,
+                "defaultValue": "'Business Information'"
+            },
+            "removeTitle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "remove-title",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -155,8 +208,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 +250,8 @@ export class BusinessForm {
                     }
                 }
             }, {
-                "method": "submitted",
-                "name": "submitted",
+                "method": "clickEventOld",
+                "name": "clickEvent",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -186,13 +260,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

@@ -1,29 +1,29 @@
 import { Host, h } from "@stencil/core";
 import { PHONE_MASKS } from "../../../../utils/form-input-masks";
+import { deconstructDate } from "../../utils/helpers";
 export class BusinessRepresentative {
     constructor() {
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { [name]: value }) }));
+        };
+        this.onAddressFormUpdate = (values) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { address: Object.assign(Object.assign({}, this.formController.values.getValue().representative.address), values) }) }));
+        };
+        this.onDateOfBirthUpdate = (event) => {
+            const dob_values = deconstructDate(event.detail);
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { dob_day: dob_values.dob_day, dob_month: dob_values.dob_month, dob_year: dob_values.dob_year }) }));
+        };
         this.formController = undefined;
         this.errors = {};
         this.representative = {};
-        this.inputHandler = this.inputHandler.bind(this);
-        this.onAddressFormUpdate = this.onAddressFormUpdate.bind(this);
     }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors.representative)));
         this.formController.values.subscribe(values => (this.representative = Object.assign({}, values.representative)));
     }
-    inputHandler(name, value) {
-        this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { [name]: value }) }));
-    }
-    onAddressFormUpdate(values) {
-        this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { address: Object.assign(Object.assign({}, this.formController.values.getValue().representative.address), values) }) }));
-    }
     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 col-md-4" }, h("form-control-date", { name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, error: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { class: "col-12 col-md-8" }, 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 }))))));
     }

package/dist/collection/components/business-forms/{business-form/business-address/business-address-form.js → owner-form/identity-address/identity-address-form.js}

@@ -1,7 +1,12 @@
 import { Host, h } from "@stencil/core";
 import StateOptions from "../../../../utils/state-options";
-export class BusinessAddressForm {
+import { filterPostalInput } from "../../../form/utils";
+export class IdentityAddressForm {
     constructor() {
+        this.inputHandler = (name, value) => {
+            this.address[name] = value;
+            this.address = Object.assign({}, this.address);
+        };
         this.handleFormUpdate = undefined;
         this.errors = undefined;
         this.defaultValues = undefined;
@@ -10,24 +15,22 @@ export class BusinessAddressForm {
     handleAddressChange(newValues) {
         this.handleFormUpdate(newValues);
     }
-    inputHandler(name, value) {
-        this.address[name] = value;
-        this.address = Object.assign({}, this.address);
-    }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, h("form-control-text", { name: "line1", label: "Street Address", defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, error: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12 col-md-4" }, h("form-control-text", { name: "line2", label: "Apartment, Suite, etc. (optional)", defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, error: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, error: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "state", label: "State", defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, options: StateOptions, error: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12 col-md-6" }, h("form-control-number", { name: "postal_code", label: "Postal Code", defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, error: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, inputHandler: (name, value) => this.inputHandler(name, value) })))));
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-8" }, h("form-control-text", { name: "line1", label: "Street Address", defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, error: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-text", { name: "line2", label: "Apartment, Suite, etc. (optional)", defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, error: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, error: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "state", label: "State", defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, options: StateOptions, error: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "postal_code", label: "Postal Code", defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, error: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: filterPostalInput, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-select", { name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: (_l = this.defaultValues) === null || _l === void 0 ? void 0 : _l.country, error: (_m = this.errors) === null || _m === void 0 ? void 0 : _m.country,
+            // just for now so we skip handling country specificities
+            disabled: true })))));
     }
-    static get is() { return "justifi-business-address-form"; }
+    static get is() { return "justifi-identity-address-form"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["business-address-form.scss"]
+            "$": ["identity-address-form.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["business-address-form.css"]
+            "$": ["identity-address-form.css"]
         };
     }
     static get properties() {

package/dist/collection/components/business-forms/owner-form/identity-address/test/identity-address.e2e.js

@@ -0,0 +1,9 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('justifi-identity-address-form', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<justifi-identity-address-form></justifi-identity-address-form>');
+        const element = await page.find('justifi-identity-address-form');
+        expect(element).toHaveClass('hydrated');
+    });
+});

package/dist/collection/components/business-forms/{business-form/business-address/test/business-address.spec.js → owner-form/identity-address/test/identity-address.spec.js}

@@ -1,14 +1,14 @@
 import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
-import { BusinessAddressForm } from "../business-address-form";
-describe('business-address', () => {
-    it('should render BusinessAddressForm component', async () => {
+import { IdentityAddressForm } from "../identity-address-form";
+describe('identity-address', () => {
+    it('should render IdentityAddressForm component', async () => {
         const page = await newSpecPage({
-            components: [BusinessAddressForm],
-            template: () => (h("justifi-business-address-form", null)),
+            components: [IdentityAddressForm],
+            template: () => (h("justifi-identity-address-form", null)),
         });
         expect(page.root).toEqualHtml(`
-    <justifi-business-address-form exportparts="label,input,input-invalid">
+    <justifi-identity-address-form exportparts="label,input,input-invalid">
       <mock:shadow-root>
         <div class="row gy-3">
           <div class="col-12 col-md-8">
@@ -28,14 +28,18 @@ describe('business-address', () => {
           </div>
 
           <div class="col-12 col-md-6">
-            <form-control-number label="Postal Code" name="postal_code"></form-control-number>
+            <form-control-text label="Postal Code" maxlength="5" name="postal_code"></form-control-text>
+          </div>
+
+          <div class="col-12">
+            <form-control-select disabled="" label="Country" name="country"></form-control-select>
           </div>
         </div>
       </mock:shadow-root>
-    </justifi-business-address-form>
+    </justifi-identity-address-form>
   `);
     });
-    it('should render BusinessAddressForm component with defaults', async () => {
+    it('should render IdentityAddressForm component with defaults', async () => {
         const businessAddress = {
             line1: 'Street 1',
             line2: 'Apartment 1',
@@ -45,11 +49,11 @@ describe('business-address', () => {
             country: 'Country',
         };
         const page = await newSpecPage({
-            components: [BusinessAddressForm],
-            template: () => (h("justifi-business-address-form", { defaultValues: businessAddress })),
+            components: [IdentityAddressForm],
+            template: () => (h("justifi-identity-address-form", { defaultValues: businessAddress })),
         });
         expect(page.root).toEqualHtml(`
-    <justifi-business-address-form exportparts="label,input,input-invalid">
+    <justifi-identity-address-form exportparts="label,input,input-invalid">
       <mock:shadow-root>
         <div class="gy-3 row">
           <div class="col-12 col-md-8">
@@ -65,11 +69,14 @@ describe('business-address', () => {
             <form-control-select defaultValue="State" label="State" name="state"></form-control-select>
           </div>
           <div class="col-12 col-md-6">
-            <form-control-number defaultValue="12345" label="Postal Code" name="postal_code"></form-control-number>
+            <form-control-text defaultvalue="12345" label="Postal Code" maxlength="5" name="postal_code"></form-control-text>
+          </div>
+          <div class="col-12">
+            <form-control-select defaultValue="Country" disabled="" label="Country" name="country"></form-control-select>
           </div>
         </div>
       </mock:shadow-root>
-    </justifi-business-address-form>
+    </justifi-identity-address-form>
   `);
     });
 });

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

@@ -4,21 +4,26 @@ import { PHONE_MASKS } from "../../../utils/form-input-masks";
 import { Api } from "../../../api";
 import { Owner } from "../../../api/Identity";
 import { parseIdentityInfo } from "../utils/payload-parsers";
-import { ownerSchema } from "../schemas/business-identity-schema";
+import { identitySchema } from "../schemas/business-identity-schema";
 import { config } from "../../../../config";
 import { LoadingSpinner } from "../../form/utils";
-import { OwnerFormServerErrors } from "../utils/business-form-types";
+import { deconstructDate } from "../utils/helpers";
+import { OwnerFormServerErrors, OwnerFormClickActions } from "../utils/business-form-types";
 export class BusinessOwnerForm {
     constructor() {
+        this.instantiateOwner = (data) => {
+            this.owner = Object.assign({}, new Owner(data));
+            this.formController.setInitialValues(this.owner);
+        };
         this.fetchData = async () => {
             if (!this.ownerId) {
+                this.instantiateOwner({});
                 return;
             }
             this.isLoading = true;
             try {
                 const response = await this.api.get(this.identityEndpoint);
-                this.owner = Object.assign({}, new Owner(response.data));
-                this.formController.setInitialValues(this.owner);
+                this.instantiateOwner(response.data);
             }
             catch (error) {
                 this.serverError.emit({ data: error, message: OwnerFormServerErrors.fetchData });
@@ -55,9 +60,26 @@ export class BusinessOwnerForm {
         this.onAddressFormUpdate = (values) => {
             this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { address: Object.assign(Object.assign({}, this.formController.values.getValue().address), values) }));
         };
-        this.validateAndSubmit = (event) => {
+        this.onDateOfBirthUpdate = (event) => {
+            if (event.detail === '') {
+                this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { dob_day: null, dob_month: null, dob_year: null }));
+            }
+            else {
+                const dob_values = deconstructDate(event.detail);
+                this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { dob_day: dob_values.dob_day, dob_month: dob_values.dob_month, dob_year: dob_values.dob_year }));
+            }
+        };
+        this.handleAddOwner = () => {
+            const eventName = this.ownerId ? OwnerFormClickActions.updateOwner : OwnerFormClickActions.addOwner;
+            this.clickEvent.emit({ name: eventName });
+        };
+        this.handleRemoveOwner = () => {
+            this.removeOwner(this.ownerId);
+            this.clickEvent.emit({ name: OwnerFormClickActions.removeOwner });
+        };
+        this.validateAndSubmit = async (event) => {
             event.preventDefault();
-            const isValid = this.formController.validate();
+            const isValid = await this.validate();
             if (isValid) {
                 this.submit();
             }
@@ -65,6 +87,7 @@ export class BusinessOwnerForm {
         this.authToken = undefined;
         this.ownerId = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.removeOwner = undefined;
         this.newFormOpen = undefined;
         this.ownersLength = undefined;
@@ -107,6 +130,7 @@ export class BusinessOwnerForm {
             return false;
         }
         else {
+            this.instantiateOwner(response.data);
             return true;
         }
     }
@@ -114,7 +138,7 @@ export class BusinessOwnerForm {
         const missingAuthTokenMessage = 'Warning: Missing auth-token. The form will not be functional without it.';
         if (!this.authToken)
             console.error(missingAuthTokenMessage);
-        this.formController = new FormController(ownerSchema);
+        this.formController = new FormController(identitySchema('owner', this.allowOptionalFields));
         this.api = Api(this.authToken, config.proxyApiOrigin);
         this.fetchData();
     }
@@ -126,15 +150,15 @@ export class BusinessOwnerForm {
         return this.formController.validate();
     }
     async submit() {
-        return this.sendData();
+        const isValid = await this.validate();
+        if (isValid) {
+            return this.sendData();
+        }
     }
     render() {
         const ownerDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", { onSubmit: this.validateAndSubmit }, h("fieldset", null, h("legend", null, this.formTitle), h("div", { class: 'row gy-3' }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.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: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.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: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.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: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.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: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.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: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.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: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.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: "EIN/SSN", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.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: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.address, handleFormUpdate: values => this.onAddressFormUpdate(values) })), h("div", { class: "container d-flex gap-2" }, h("button", { type: "submit", class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}`, disabled: this.isLoading }, this.isLoading ? LoadingSpinner() : this.submitButtonText), this.showRemoveButton &&
-            h("button", { type: "button", class: "btn btn-danger", onClick: () => this.removeOwner(this.ownerId) }, "Remove owner"))), h("hr", null)))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", { onSubmit: this.validateAndSubmit }, h("fieldset", null, h("legend", null, this.formTitle), h("div", { class: 'row gy-3' }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.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: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.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: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.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: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12 col-md-4" }, h("form-control-date", { name: "dob_full", label: "Birth Date", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.dob_full, error: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { class: "col-12 col-md-8" }, h("form-control-number", { name: "identification_number", label: "SSN", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.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: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate })), h("div", { class: "container d-flex gap-2" }, h("button", { type: "submit", class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}`, onClick: () => this.handleAddOwner(), disabled: this.isLoading }, this.isLoading ? LoadingSpinner() : this.submitButtonText), this.showRemoveButton &&
+            h("button", { type: "button", class: "btn btn-danger", onClick: () => this.handleRemoveOwner() }, "Remove owner"))), h("hr", null)))));
     }
     static get is() { return "justifi-owner-form"; }
     static get encapsulation() { return "shadow"; }
@@ -201,6 +225,23 @@ export class BusinessOwnerForm {
                 "attribute": "business-id",
                 "reflect": false
             },
+            "allowOptionalFields": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "allow-optional-fields",
+                "reflect": false
+            },
             "removeOwner": {
                 "type": "unknown",
                 "mutable": false,
@@ -282,6 +323,27 @@ export class BusinessOwnerForm {
                         }
                     }
                 }
+            }, {
+                "method": "clickEvent",
+                "name": "click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "OwnerFormClickEvent",
+                    "resolved": "OwnerFormClickEvent",
+                    "references": {
+                        "OwnerFormClickEvent": {
+                            "location": "import",
+                            "path": "../utils/business-form-types",
+                            "id": "src/components/business-forms/utils/business-form-types.ts::OwnerFormClickEvent"
+                        }
+                    }
+                }
             }, {
                 "method": "formLoading",
                 "name": "formLoading",