@justifi/webcomponents 4.7.6 → 4.8.0

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { Business } from "../../api/Business";
 import { Api } from "../../api";
 import { ErrorState, LoadingState } from "../details/utils";
 import { config } from "../../../config";
@@ -49,7 +50,7 @@ export class BusinessDetails {
                 this.renderState = RENDER_STATES.ERROR;
                 return;
             }
-            this.business = response.data;
+            this.business = new Business(response.data);
             this.renderState = RENDER_STATES.READY;
         }
         catch (error) {
@@ -62,14 +63,13 @@ export class BusinessDetails {
         }
     }
     render() {
-        var _a, _b, _c;
         if (this.renderState === RENDER_STATES.LOADING) {
             return h(Host, null, LoadingState);
         }
         if (this.renderState === RENDER_STATES.ERROR) {
             return h(Host, null, ErrorState(this.errorMessage));
         }
-        return (h(Host, null, h("generic-info-details", { business: this.business }), h("legal-address-details", { legalAddress: (_a = this.business) === null || _a === void 0 ? void 0 : _a.legal_address }), h("representative-details", { representative: (_b = this.business) === null || _b === void 0 ? void 0 : _b.representative }), h("owner-details", { owners: (_c = this.business) === null || _c === void 0 ? void 0 : _c.owners }), h("additional-questions-details", { business: this.business })));
+        return (h(Host, null, h("generic-info-details", { business: this.business }), h("legal-address-details", { legalAddress: this.business.legal_address }), h("representative-details", { representative: this.business.representative }), h("owner-details", { owners: this.business.owners }), h("additional-questions-details", { additionalQuestions: this.business.additional_questions })));
     }
     static get is() { return "justifi-business-details"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,6 @@
+export var ClickEvents;
+(function (ClickEvents) {
+    ClickEvents["nextStep"] = "nextStep";
+    ClickEvents["previousStep"] = "previousStep";
+    ClickEvents["submit"] = "submit";
+})(ClickEvents || (ClickEvents = {}));

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

@@ -2,7 +2,7 @@ import { object, string } from "yup";
 export const RegExZip = /^\d{5}/;
 const BusinessAddressFormSchema = object({
     line1: string().required('Enter street address'),
-    line2: string(),
+    line2: string().nullable(),
     city: string().required('Enter city'),
     state: string().required('Choose state'),
     postal_code: string()

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

@@ -1,4 +1,4 @@
-import { array, boolean, object, string } from "yup";
+import { object, string } from "yup";
 import legalAddressSchema from "./legal-address-form/legal-address-form-schema";
 export const RegExZip = /^\d{5}/;
 export class Business {
@@ -135,25 +135,25 @@ const representativeSchema = object({
     identification_number: string(),
     address: addressSchema,
 });
-const ownerSchema = object({
-    name: string().required('Enter owner name'),
-    title: string().required('Enter owner title'),
-    email: string()
-        .email('Enter valid owner email')
-        .required('Enter owner email'),
-    phone: string().required('Enter owner phone number'),
-    dob_day: string().required('Enter owner birth day'),
-    dob_month: string().required('Enter owner birth month'),
-    dob_year: string().required('Enter owner birth year'),
-    identification_number: string(),
-    is_owner: boolean(),
-    address: addressSchema,
-});
+// const ownerSchema = object({
+//   name: string().required('Enter owner name'),
+//   title: string().required('Enter owner title'),
+//   email: string()
+//     .email('Enter valid owner email')
+//     .required('Enter owner email'),
+//   phone: string().required('Enter owner phone number'),
+//   dob_day: string().required('Enter owner birth day'),
+//   dob_month: string().required('Enter owner birth month'),
+//   dob_year: string().required('Enter owner birth year'),
+//   identification_number: string(),
+//   is_owner: boolean(),
+//   address: addressSchema,
+// });
 const additionQuestionsSchema = object({
     business_revenue: string().required('Enter business revenue'),
     business_payment_volume: string().required('Enter business payment volume'),
     business_dispute_volume: string().required('Enter business dispute volume'),
     business_receivable_volume: string().required('Enter business receivable volume'),
 });
-const businessFormSchema = object(Object.assign(Object.assign({}, businessGenericInfoSchema.fields), { legal_address: legalAddressSchema.required('Enater legal address'), additional_questions: additionQuestionsSchema.required('Enter additional questions'), representative: representativeSchema.required('Enter representative information'), owners: array().of(ownerSchema).min(1, 'Enter at least 1 owners') }));
+const businessFormSchema = object(Object.assign(Object.assign({}, businessGenericInfoSchema.fields), { legal_address: legalAddressSchema, additional_questions: additionQuestionsSchema, representative: representativeSchema }));
 export default businessFormSchema;

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

@@ -5,33 +5,25 @@ import { Api } from "../../api";
 import { parseForPatching } from "./helpers";
 import { config } from "../../../config";
 import { FormAlert } from "../form/utils";
-const componentStepMapping = {
-    0: (formController) => h("justifi-business-generic-info", { formController: formController }),
-    1: (formController) => h("justifi-legal-address-form", { formController: formController }),
-    2: (formController) => h("justifi-additional-questions", { formController: formController }),
-    3: (formController) => h("justifi-business-representative", { formController: formController }),
-    4: (formController) => h("justifi-business-owners", { formController: formController })
-};
+import { ClickEvents } from "./BusinessFormEventTypes";
+import { Business } from "../../api/Business";
 /**
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
  * @exportedPart input-invalid: Invalid state for inputfs
  */
 export class BusinessFormStepped {
-    get submitDisabled() {
-        return !this.authToken || this.isLoading || this.serverError;
-    }
-    get nextDisabled() {
-        return !this.authToken || this.isLoading || this.serverError;
-    }
-    get showErrors() {
-        return this.serverError && !this.hideErrors;
-    }
     constructor() {
+        this.componentStepMapping = {
+            0: (formController) => h("justifi-business-generic-info", { formController: formController }),
+            1: (formController) => h("justifi-legal-address-form", { formController: formController }),
+            2: (formController) => h("justifi-additional-questions", { formController: formController }),
+            3: (formController) => h("justifi-business-representative", { formController: formController })
+        };
         this.authToken = undefined;
         this.businessId = undefined;
         this.testMode = false;
-        this.hideErrors = undefined;
+        this.hideErrors = false;
         this.isLoading = false;
         this.currentStep = 0;
         this.totalSteps = 4;
@@ -40,23 +32,26 @@ export class BusinessFormStepped {
         this.sendData = this.sendData.bind(this);
         this.fetchData = this.fetchData.bind(this);
     }
+    get disabledState() {
+        return this.isLoading;
+    }
+    get showErrors() {
+        return this.serverError && !this.hideErrors;
+    }
+    get businessEndpoint() {
+        return `entities/business/${this.businessId}`;
+    }
     componentWillLoad() {
-        if (!this.authToken) {
-            console.warn('Warning: Missing auth-token. The form will not be functional without it.');
-        }
+        const missingAuthTokenMessage = 'Warning: Missing auth-token. The form will not be functional without it.';
+        const missingBusinessIdMessage = 'Warning: Missing business-id. The form requires an existing business-id to function.';
+        if (!this.authToken)
+            console.error(missingAuthTokenMessage);
+        if (!this.businessId)
+            console.error(missingBusinessIdMessage);
         this.formController = new FormController(businessFormSchema);
         this.api = Api(this.authToken, config.proxyApiOrigin);
-        this.totalSteps = Object.keys(componentStepMapping).length - 1;
-        if (this.businessId) {
-            this.fetchData(this.businessId);
-        }
-        else {
-            this.formController.setInitialValues({
-                legal_address: {
-                    country: 'US',
-                },
-            });
-        }
+        this.totalSteps = Object.keys(this.componentStepMapping).length - 1;
+        this.fetchData();
     }
     handleResponse(response, onSuccess) {
         if (response.error) {
@@ -78,17 +73,12 @@ export class BusinessFormStepped {
         }
         this.isLoading = true;
         try {
-            const data = this.formController.values.getValue();
-            // Conditionally making either POST or PATCH request
-            if (this.businessId) {
-                const payload = parseForPatching(data);
-                const response = await this.api.patch(`entities/business/${this.businessId}`, JSON.stringify(payload));
-                this.handleResponse(response, onSuccess);
-            }
-            else {
-                const response = await this.api.post('entities/business', JSON.stringify(data));
-                this.handleResponse(response, onSuccess);
-            }
+            const values = this.formController.values.getValue();
+            const initialValues = this.formController.getInitialValues();
+            const payload = parseForPatching(values, initialValues);
+            const response = await this.api.patch(this.businessEndpoint, JSON.stringify(payload));
+            this.handleResponse(response, onSuccess);
+            this.submitted.emit({ data: response.data });
         }
         catch (error) {
             this.serverError = true;
@@ -98,11 +88,12 @@ export class BusinessFormStepped {
             this.isLoading = false;
         }
     }
-    async fetchData(businessId) {
+    async fetchData() {
         this.isLoading = true;
         try {
-            const response = await this.api.get(`entities/business/${businessId}`);
-            this.formController.setInitialValues(response.data);
+            const response = await this.api.get(this.businessEndpoint);
+            const business = new Business(response.data);
+            this.formController.setInitialValues(business);
         }
         catch (error) {
             this.serverError = true;
@@ -120,22 +111,24 @@ export class BusinessFormStepped {
         return this.currentStep > 0;
     }
     previousStepButtonOnClick() {
+        this.clickEvent.emit({ name: ClickEvents.previousStep });
         this.sendData(() => this.currentStep--);
     }
     showNextStepButton() {
         return this.currentStep < this.totalSteps;
     }
-    nextStepButtonOnClick() {
+    nextStepButtonOnClick(clickEventName) {
+        this.clickEvent.emit({ name: clickEventName });
         this.sendData(() => this.currentStep++);
     }
     showSubmitButton() {
         return this.currentStep === this.totalSteps;
     }
     currentStepComponent() {
-        return componentStepMapping[this.currentStep](this.formController);
+        return this.componentStepMapping[this.currentStep](this.formController);
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("h1", null, "Business Information"), this.showErrors && FormAlert(this.errorMessage), h("form", { onSubmit: this.validateAndSubmit }, h("div", { class: "my-4" }, this.currentStepComponent()), h("div", { class: "d-flex justify-content-between align-items-center" }, h("div", { class: "d-flex align-items-center" }, "Step ", this.currentStep + 1, " of ", this.totalSteps + 1), h("div", { class: "d-flex gap-2" }, this.showPreviousStepButton() && (h("button", { type: "button", class: "btn btn-secondary", onClick: () => this.previousStepButtonOnClick(), disabled: this.isLoading }, "Previous")), this.showNextStepButton() && (h("button", { type: "button", class: "btn btn-primary", onClick: () => this.nextStepButtonOnClick(), disabled: this.nextDisabled }, "Next")), this.showSubmitButton() && (h("button", { type: "submit", class: "btn btn-primary", onClick: () => this.nextStepButtonOnClick(), disabled: this.submitDisabled }, "Submit")))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("h1", null, "Business Information"), this.showErrors && FormAlert(this.errorMessage), h("form", { onSubmit: this.validateAndSubmit }, h("div", { class: "my-4" }, this.currentStepComponent()), h("div", { class: "d-flex justify-content-between align-items-center" }, h("div", { class: "d-flex align-items-center" }, "Step ", this.currentStep + 1, " of ", this.totalSteps + 1), h("div", { class: "d-flex gap-2" }, this.showPreviousStepButton() && (h("button", { type: "button", class: "btn btn-secondary", onClick: () => this.previousStepButtonOnClick(), disabled: this.isLoading }, "Previous")), this.showNextStepButton() && (h("button", { type: "button", class: "btn btn-primary", onClick: () => this.nextStepButtonOnClick(ClickEvents.nextStep), disabled: this.disabledState }, "Next")), this.showSubmitButton() && (h("button", { type: "submit", class: "btn btn-primary", onClick: () => this.nextStepButtonOnClick(ClickEvents.submit), disabled: this.disabledState }, "Submit")))))));
     }
     static get is() { return "justifi-business-form-stepped"; }
     static get originalStyleUrls() {
@@ -176,7 +169,7 @@ export class BusinessFormStepped {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -217,7 +210,8 @@ export class BusinessFormStepped {
                     "text": ""
                 },
                 "attribute": "hide-errors",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -230,4 +224,37 @@ export class BusinessFormStepped {
             "errorMessage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "clickEvent",
+                "name": "clickEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ data?: any, name: string }",
+                    "resolved": "{ data?: any; name: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "submitted",
+                "name": "submitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ data: any }",
+                    "resolved": "{ data: any; }",
+                    "references": {}
+                }
+            }];
+    }
 }

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { PHONE_MASKS } from "../../../utils/phone-masks";
+import { PHONE_MASKS } from "../../../utils/form-input-masks";
 class BusinessOwner {
     constructor() {
         this.name = '';
@@ -21,9 +21,11 @@ class BusinessOwner {
  * @exportedPart input-invalid: Invalid state for inputfs
  */
 export class BusinessOwners {
+    get disabledState() {
+        return !!this.formController.getInitialValues().owners && !!this.formController.getInitialValues().owners.length;
+    }
     constructor() {
         this.formController = undefined;
-        this.isEditing = undefined;
         this.errors = [];
         this.owners = [];
         this.inputHandler = this.inputHandler.bind(this);
@@ -64,8 +66,8 @@ export class BusinessOwners {
         const ownersDefaultValue = this.formController.values.getValue().owners || [];
         return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Owners"), h("hr", null), this.owners.map((_owner, index) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
-            return (h("div", { class: "row gx-2 gy-2 mb-4" }, h("div", { class: "col-12" }, h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: (_a = ownersDefaultValue[index]) === null || _a === void 0 ? void 0 : _a.name, error: (_b = this.errors[index]) === null || _b === void 0 ? void 0 : _b.name, inputHandler: (name, value) => this.inputHandler(name, value, index), disabled: this.isEditing })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "title", label: "Title", defaultValue: (_c = ownersDefaultValue[index]) === null || _c === void 0 ? void 0 : _c.title, error: (_d = this.errors[index]) === null || _d === void 0 ? void 0 : _d.title, inputHandler: (name, value) => this.inputHandler(name, value, index), disabled: this.isEditing }))), h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email", defaultValue: (_e = ownersDefaultValue[index]) === null || _e === void 0 ? void 0 : _e.email, error: (_f = this.errors[index]) === null || _f === void 0 ? void 0 : _f.email, inputHandler: (name, value) => this.inputHandler(name, value, index), disabled: this.isEditing })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone", defaultValue: (_g = ownersDefaultValue[index]) === null || _g === void 0 ? void 0 : _g.phone, error: (_h = this.errors[index]) === null || _h === void 0 ? void 0 : _h.phone, inputHandler: (name, value) => this.inputHandler(name, value, index), mask: PHONE_MASKS.US, disabled: this.isEditing }))), h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_day", label: "Date of Birth - Day", defaultValue: (_j = ownersDefaultValue[index]) === null || _j === void 0 ? void 0 : _j.dob_day, error: (_k = this.errors[index]) === null || _k === void 0 ? void 0 : _k.dob_day, inputHandler: (name, value) => this.inputHandler(name, value, index), type: "day", disabled: this.isEditing })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_month", label: "Date of Birth - Month", defaultValue: (_l = ownersDefaultValue[index]) === null || _l === void 0 ? void 0 : _l.dob_month, error: (_m = this.errors[index]) === null || _m === void 0 ? void 0 : _m.dob_month, inputHandler: (name, value) => this.inputHandler(name, value, index), type: "month", disabled: this.isEditing })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_year", label: "Date of Birth - Year", defaultValue: (_o = ownersDefaultValue[index]) === null || _o === void 0 ? void 0 : _o.dob_year, error: (_p = this.errors[index]) === null || _p === void 0 ? void 0 : _p.dob_year, inputHandler: (name, value) => this.inputHandler(name, value, index), type: "year", disabled: this.isEditing }))), h("div", { class: "mb-3" }, h("form-control-number", { name: "identification_number", label: "Identification Number", defaultValue: (_q = ownersDefaultValue[index]) === null || _q === void 0 ? void 0 : _q.identification_number, error: (_r = this.errors[index]) === null || _r === void 0 ? void 0 : _r.identification_number, inputHandler: (name, value) => this.inputHandler(name, value, index), disabled: this.isEditing })), h("div", { class: "grid gap-3" }, h("legend", { class: "mb-3" }, "Owner Address:"), h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "line1", label: "Street Address", defaultValue: (_t = (_s = ownersDefaultValue[index]) === null || _s === void 0 ? void 0 : _s.address) === null || _t === void 0 ? void 0 : _t.line1, error: (_v = (_u = this.errors[index]) === null || _u === void 0 ? void 0 : _u.address) === null || _v === void 0 ? void 0 : _v.line1, inputHandler: (name, value) => this.addressInputHandler(name, value, index), disabled: this.isEditing })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "city", label: "City", defaultValue: (_x = (_w = ownersDefaultValue[index]) === null || _w === void 0 ? void 0 : _w.address) === null || _x === void 0 ? void 0 : _x.city, error: (_z = (_y = this.errors[index]) === null || _y === void 0 ? void 0 : _y.address) === null || _z === void 0 ? void 0 : _z.city, inputHandler: (name, value) => this.addressInputHandler(name, value, index), disabled: this.isEditing }))), h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "state", label: "State", defaultValue: (_1 = (_0 = ownersDefaultValue[index]) === null || _0 === void 0 ? void 0 : _0.address) === null || _1 === void 0 ? void 0 : _1.state, error: (_3 = (_2 = this.errors[index]) === null || _2 === void 0 ? void 0 : _2.address) === null || _3 === void 0 ? void 0 : _3.state, inputHandler: (name, value) => this.addressInputHandler(name, value, index), disabled: this.isEditing })), h("div", { class: "col-12 col-md-6" }, h("form-control-number", { name: "postal_code", label: "Postal Code", defaultValue: (_5 = (_4 = ownersDefaultValue[index]) === null || _4 === void 0 ? void 0 : _4.address) === null || _5 === void 0 ? void 0 : _5.postal_code, error: (_7 = (_6 = this.errors[index]) === null || _6 === void 0 ? void 0 : _6.address) === null || _7 === void 0 ? void 0 : _7.postal_code, inputHandler: (name, value) => this.addressInputHandler(name, value, index), disabled: this.isEditing })))), h("button", { type: "button", class: "btn btn-outline-danger", onClick: event => this.removeOwner(event, index) }, "Remove owner"))));
-        }), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("button", { type: "button", class: "btn btn-outline-primary", onClick: event => this.addOwner(event) }, "Add an owner"))))));
+            return (h("div", { class: "row gx-2 gy-2 mb-4" }, h("div", { class: "col-12" }, h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: (_a = ownersDefaultValue[index]) === null || _a === void 0 ? void 0 : _a.name, error: (_b = this.errors[index]) === null || _b === void 0 ? void 0 : _b.name, inputHandler: (name, value) => this.inputHandler(name, value, index), disabled: this.disabledState })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "title", label: "Title", defaultValue: (_c = ownersDefaultValue[index]) === null || _c === void 0 ? void 0 : _c.title, error: (_d = this.errors[index]) === null || _d === void 0 ? void 0 : _d.title, inputHandler: (name, value) => this.inputHandler(name, value, index), disabled: this.disabledState }))), h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email", defaultValue: (_e = ownersDefaultValue[index]) === null || _e === void 0 ? void 0 : _e.email, error: (_f = this.errors[index]) === null || _f === void 0 ? void 0 : _f.email, inputHandler: (name, value) => this.inputHandler(name, value, index), disabled: this.disabledState })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone", defaultValue: (_g = ownersDefaultValue[index]) === null || _g === void 0 ? void 0 : _g.phone, error: (_h = this.errors[index]) === null || _h === void 0 ? void 0 : _h.phone, inputHandler: (name, value) => this.inputHandler(name, value, index), mask: PHONE_MASKS.US, disabled: this.disabledState }))), h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_day", label: "Date of Birth - Day", defaultValue: (_j = ownersDefaultValue[index]) === null || _j === void 0 ? void 0 : _j.dob_day, error: (_k = this.errors[index]) === null || _k === void 0 ? void 0 : _k.dob_day, inputHandler: (name, value) => this.inputHandler(name, value, index), type: "day", disabled: this.disabledState })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_month", label: "Date of Birth - Month", defaultValue: (_l = ownersDefaultValue[index]) === null || _l === void 0 ? void 0 : _l.dob_month, error: (_m = this.errors[index]) === null || _m === void 0 ? void 0 : _m.dob_month, inputHandler: (name, value) => this.inputHandler(name, value, index), type: "month", disabled: this.disabledState })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_year", label: "Date of Birth - Year", defaultValue: (_o = ownersDefaultValue[index]) === null || _o === void 0 ? void 0 : _o.dob_year, error: (_p = this.errors[index]) === null || _p === void 0 ? void 0 : _p.dob_year, inputHandler: (name, value) => this.inputHandler(name, value, index), type: "year", disabled: this.disabledState }))), h("div", { class: "mb-3" }, h("form-control-number", { name: "identification_number", label: "Identification Number", defaultValue: (_q = ownersDefaultValue[index]) === null || _q === void 0 ? void 0 : _q.identification_number, error: (_r = this.errors[index]) === null || _r === void 0 ? void 0 : _r.identification_number, inputHandler: (name, value) => this.inputHandler(name, value, index), disabled: this.disabledState })), h("div", { class: "grid gap-3" }, h("legend", { class: "mb-3" }, "Owner Address:"), h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "line1", label: "Street Address", defaultValue: (_t = (_s = ownersDefaultValue[index]) === null || _s === void 0 ? void 0 : _s.address) === null || _t === void 0 ? void 0 : _t.line1, error: (_v = (_u = this.errors[index]) === null || _u === void 0 ? void 0 : _u.address) === null || _v === void 0 ? void 0 : _v.line1, inputHandler: (name, value) => this.addressInputHandler(name, value, index), disabled: this.disabledState })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "city", label: "City", defaultValue: (_x = (_w = ownersDefaultValue[index]) === null || _w === void 0 ? void 0 : _w.address) === null || _x === void 0 ? void 0 : _x.city, error: (_z = (_y = this.errors[index]) === null || _y === void 0 ? void 0 : _y.address) === null || _z === void 0 ? void 0 : _z.city, inputHandler: (name, value) => this.addressInputHandler(name, value, index), disabled: this.disabledState }))), h("div", { class: "row mb-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "state", label: "State", defaultValue: (_1 = (_0 = ownersDefaultValue[index]) === null || _0 === void 0 ? void 0 : _0.address) === null || _1 === void 0 ? void 0 : _1.state, error: (_3 = (_2 = this.errors[index]) === null || _2 === void 0 ? void 0 : _2.address) === null || _3 === void 0 ? void 0 : _3.state, inputHandler: (name, value) => this.addressInputHandler(name, value, index), disabled: this.disabledState })), h("div", { class: "col-12 col-md-6" }, h("form-control-number", { name: "postal_code", label: "Postal Code", defaultValue: (_5 = (_4 = ownersDefaultValue[index]) === null || _4 === void 0 ? void 0 : _4.address) === null || _5 === void 0 ? void 0 : _5.postal_code, error: (_7 = (_6 = this.errors[index]) === null || _6 === void 0 ? void 0 : _6.address) === null || _7 === void 0 ? void 0 : _7.postal_code, inputHandler: (name, value) => this.addressInputHandler(name, value, index), disabled: this.disabledState })))), h("button", { type: "button", class: "btn btn-outline-danger", onClick: event => this.removeOwner(event, index), disabled: this.disabledState }, "Remove owner"))));
+        }), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("button", { type: "button", class: "btn btn-outline-primary", onClick: event => this.addOwner(event), disabled: this.disabledState }, "Add an owner"))))));
     }
     static get is() { return "justifi-business-owners"; }
     static get originalStyleUrls() {
@@ -100,23 +102,6 @@ export class BusinessOwners {
                     "tags": [],
                     "text": ""
                 }
-            },
-            "isEditing": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "is-editing",
-                "reflect": false
             }
         };
     }

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { PHONE_MASKS } from "../../../utils/phone-masks";
+import { PHONE_MASKS } from "../../../utils/form-input-masks";
 export class BusinessRepresentative {
     constructor() {
         this.formController = undefined;