@justifi/webcomponents 4.10.0 → 4.12.0

package/dist/esm/justifi-additional-questions-form-step_5.entry.js

@@ -1,19 +1,18 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-df86d9a2.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-83dcf934.js';
 import { F as FormController } from './form-5279c05a.js';
-import { A as AdditionalQuestions, C as CoreBusinessInfo, a as Address } from './Business-6cc4e473.js';
+import { A as AdditionalQuestions, C as CoreBusinessInfo, O as Owner, R as Representative, d as deconstructDate, b as Address } from './Business-2410f7e3.js';
 import { A as Api } from './Api-0e88671c.js';
 import './Pagination-afc8f96d.js';
-import './Payment-55886c86.js';
+import './Payment-ef9fc1ae.js';
 import './Payout-dfe15b00.js';
 import { c as config } from './config-476c7241.js';
-import { a as additionQuestionsSchema, b as businessCoreInfoSchema } from './business-additional-questions-schema-2cb80f70.js';
-import { B as BusinessFormServerErrors } from './business-form-types-de9f38cd.js';
-import { B as BusinessTypeOptions, a as BusinessStructureOptions } from './business-form-select-options-6b9293fe.js';
-import { T as TAX_ID_MASKS, P as PHONE_MASKS } from './form-input-masks-a8187c77.js';
-import { a as parseCoreInfo, b as parseIdentityInfo, r as representativeSchema, c as parseAddressInfo, l as legalAddressSchema } from './payload-parsers-caea809d.js';
-import { e as flattenNestedObject } from './utils-d9e90399.js';
-import { O as Owner, R as Representative } from './Identity-5f8f916f.js';
+import { a as additionalQuestionsSchema, b as businessCoreInfoSchema } from './business-additional-questions-schema-5571d40f.js';
+import { B as BusinessFormServerErrors, b as BusinessTypeOptions, O as OwnerFormClickActions } from './business-form-types-46ecd908.js';
+import { T as TAX_ID_MASKS, P as PHONE_MASKS } from './form-input-masks-850c8cd4.js';
+import { e as parseCoreInfo, f as parseIdentityInfo, i as identitySchema, g as parseAddressInfo, a as addressSchema } from './payload-parsers-192e0c3e.js';
+import { e as flattenNestedObject } from './utils-243abdb4.js';
 import { S as StateOptions } from './state-options-a356fb11.js';
+import { f as filterPostalInput } from './utils-6f05d9d7.js';
 import './index.esm-22b47398.js';
 
 const AdditionalQuestionsFormStep = class {
@@ -55,6 +54,7 @@ const AdditionalQuestionsFormStep = class {
         };
         this.authToken = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.formController = undefined;
         this.errors = {};
         this.additional_questions = {};
@@ -82,7 +82,7 @@ const AdditionalQuestionsFormStep = class {
             console.error(missingAuthTokenMessage);
         if (!this.businessId)
             console.error(missingBusinessIdMessage);
-        this.formController = new FormController(additionQuestionsSchema);
+        this.formController = new FormController(additionalQuestionsSchema(this.allowOptionalFields));
         this.api = Api(this.authToken, config.proxyApiOrigin);
         this.fetchData();
     }
@@ -138,6 +138,7 @@ const BusinessCoreInfoFormStep = class {
         };
         this.authToken = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.formController = undefined;
         this.errors = {};
         this.coreInfo = {};
@@ -165,7 +166,7 @@ const BusinessCoreInfoFormStep = class {
             console.error(missingAuthTokenMessage);
         if (!this.businessId)
             console.error(missingBusinessIdMessage);
-        this.formController = new FormController(businessCoreInfoSchema);
+        this.formController = new FormController(businessCoreInfoSchema(this.allowOptionalFields));
         this.api = Api(this.authToken, config.proxyApiOrigin);
         this.fetchData();
     }
@@ -177,7 +178,7 @@ const BusinessCoreInfoFormStep = class {
     }
     render() {
         const coreInfoDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_structure", label: "Business Structure", options: BusinessStructureOptions, defaultValue: coreInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })))))));
     }
 };
 BusinessCoreInfoFormStep.style = businessCoreInfoFormStepCss;
@@ -188,6 +189,7 @@ const BusinessOwnersFormStep = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.submitted = createEvent(this, "submitted", 7);
+        this.clickEvent = createEvent(this, "click-event", 7);
         this.formLoading = createEvent(this, "formLoading", 7);
         this.serverError = createEvent(this, "serverError", 7);
         this.managePayload = async () => {
@@ -235,10 +237,11 @@ const BusinessOwnersFormStep = class {
                 this.formLoading.emit(false);
             }
         };
-        this.addOwnerForm = () => {
+        this.addOwnerForm = (fireClick) => {
             this.newFormOpen = true;
             const newOwner = Object.assign({}, new Owner({}));
             this.owners = [...this.owners, newOwner];
+            fireClick && this.clickEvent.emit({ name: OwnerFormClickActions.addOwnerForm });
         };
         this.removeOwnerForm = (id) => {
             this.owners = this.owners.filter(owner => owner.id !== id);
@@ -258,6 +261,7 @@ const BusinessOwnersFormStep = class {
         };
         this.authToken = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.owners = [];
         this.newFormOpen = undefined;
         this.refs = [];
@@ -310,9 +314,9 @@ const BusinessOwnersFormStep = class {
     }
     render() {
         return (h(Host, { exportparts: "label,input,input-invalid" }, h("div", { class: 'col-12' }, this.owners.map((owner) => {
-            return (h("justifi-owner-form", { key: owner.id, authToken: this.authToken, businessId: this.businessId, ownerId: owner.id, removeOwner: this.removeOwnerForm, newFormOpen: this.newFormOpen, ownersLength: this.owners.length, onSubmitted: (e) => this.handleOwnerSubmit(e), onFormLoading: (e) => this.formLoading.emit(e.detail), ref: (ref) => { this.matchRef(ref, owner.id); } }));
+            return (h("justifi-owner-form", { key: owner.id, authToken: this.authToken, businessId: this.businessId, ownerId: owner.id, removeOwner: this.removeOwnerForm, newFormOpen: this.newFormOpen, ownersLength: this.owners.length, onSubmitted: (e) => this.handleOwnerSubmit(e), onFormLoading: (e) => this.formLoading.emit(e.detail), allowOptionalFields: this.allowOptionalFields, ref: (ref) => { this.matchRef(ref, owner.id); } }));
         })), this.showAddOwnerButton &&
-            h("div", { class: 'col-12' }, h("button", { class: 'btn btn-primary', onClick: this.addOwnerForm }, "Add Owner"))));
+            h("div", { class: 'col-12' }, h("button", { class: 'btn btn-primary', onClick: () => this.addOwnerForm(true) }, "Add Owner"))));
     }
     static get watchers() { return {
         "owners": ["onOwnersUpdated"]
@@ -362,8 +366,18 @@ const BusinessRepresentativeFormStep = class {
         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.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.authToken = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.formController = undefined;
         this.errors = {};
         this.representative = {};
@@ -391,7 +405,7 @@ const BusinessRepresentativeFormStep = class {
             console.error(missingAuthTokenMessage);
         if (!this.businessId)
             console.error(missingBusinessIdMessage);
-        this.formController = new FormController(representativeSchema);
+        this.formController = new FormController(identitySchema('representative', this.allowOptionalFields));
         this.api = Api(this.authToken, config.proxyApiOrigin);
         this.fetchData();
     }
@@ -401,10 +415,7 @@ const BusinessRepresentativeFormStep = class {
     }
     render() {
         const representativeDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, 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: "EIN/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("form", null, 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 })))))));
     }
 };
 BusinessRepresentativeFormStep.style = businessRepresentativeFormStepCss;
@@ -450,6 +461,7 @@ const LegalAddressFormStep = class {
         };
         this.authToken = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.formController = undefined;
         this.errors = {};
         this.legal_address = {};
@@ -477,7 +489,7 @@ const LegalAddressFormStep = class {
             console.error(missingAuthTokenMessage);
         if (!this.businessId)
             console.error(missingBusinessIdMessage);
-        this.formController = new FormController(legalAddressSchema);
+        this.formController = new FormController(addressSchema(this.allowOptionalFields));
         this.api = Api(this.authToken, config.proxyApiOrigin);
         this.fetchData();
     }
@@ -486,9 +498,9 @@ const LegalAddressFormStep = class {
         this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors)));
     }
     render() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const legalAddressDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, 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: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.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: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.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: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.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: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.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: (_e = this.errors) === null || _e === void 0 ? void 0 : _e.country,
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, 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: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.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: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.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: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.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: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.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: (_e = this.errors) === null || _e === void 0 ? void 0 : _e.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: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.country,
             // just for now so we skip handling country specificities
             disabled: true })))))));
     }

package/dist/esm/justifi-additional-questions_4.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, H as Host } from './index-df86d9a2.js';
-import { B as BusinessTypeOptions, a as BusinessStructureOptions } from './business-form-select-options-6b9293fe.js';
-import { T as TAX_ID_MASKS, P as PHONE_MASKS } from './form-input-masks-a8187c77.js';
-import { C as CoreBusinessInfo } from './Business-6cc4e473.js';
-import './utils-d9e90399.js';
-import './state-options-a356fb11.js';
+import { r as registerInstance, h, H as Host } from './index-83dcf934.js';
+import { b as BusinessTypeOptions } from './business-form-types-46ecd908.js';
+import { T as TAX_ID_MASKS, P as PHONE_MASKS } from './form-input-masks-850c8cd4.js';
+import { C as CoreBusinessInfo, d as deconstructDate } from './Business-2410f7e3.js';
+import { S as StateOptions } from './state-options-a356fb11.js';
+import { f as filterPostalInput } from './utils-6f05d9d7.js';
 
 const AdditionalQuestions = class {
     constructor(hostRef) {
@@ -48,7 +48,7 @@ const BusinessCoreInfo = class {
     }
     render() {
         const coreInfoDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_structure", label: "Business Structure", options: BusinessStructureOptions, defaultValue: coreInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: coreInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, error: this.errors.industry, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number-masked", { name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
     }
 };
 BusinessCoreInfo.style = businessCoreInfoCss;
@@ -58,28 +58,27 @@ const businessRepresentativeCss = ":root,[data-bs-theme=light]{--bs-blue:#0d6efd
 const BusinessRepresentative = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        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 }))))));
     }
 };
 BusinessRepresentative.style = businessRepresentativeCss;
@@ -102,9 +101,9 @@ const LegalAddressForm = class {
         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/esm/justifi-bank-account-form.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-df86d9a2.js';
+import { r as registerInstance, c as createEvent, h } from './index-83dcf934.js';
 import { c as config } from './config-476c7241.js';
 
 const BankAccountForm = class {

package/dist/esm/justifi-billing-form_4.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, c as createEvent } from './index-df86d9a2.js';
+import { r as registerInstance, h, H as Host, c as createEvent } from './index-83dcf934.js';
 import { c as create$3, a as create$6 } from './index.esm-22b47398.js';
-import { R as RegExZip, o as composeQueryParams } from './utils-d9e90399.js';
+import { R as RegExZip, n as composeQueryParams } from './utils-243abdb4.js';
 import { S as StateOptions } from './state-options-a356fb11.js';
 
 const BillingFormSchema = create$3({
@@ -1563,7 +1563,7 @@ const MessageEventType = {
 };
 
 const name = "@justifi/webcomponents";
-const version = "4.10.0";
+const version = "4.12.0";
 const description = "JustiFi Web Components";
 const main = "dist/module/index.js";
 const module = "dist/module/index.js";
@@ -1826,7 +1826,7 @@ const SelectInput = class {
         this.fieldReceivedInput.emit({ name: name, value: target.value });
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label" }, this.label), h("select", { name: this.name, onInput: event => this.onInput(event), part: `input${this.error ? ' input-invalid' : ''}`, class: this.error ? 'form-select is-invalid' : 'form-select' }, this.options.map(option => (h("option", { value: option.value }, option.label)))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+        return (h(Host, { exportparts: "label,input,input-invalid,invalid-feedback" }, h("label", { part: "label", class: "form-label" }, this.label), h("select", { name: this.name, onInput: event => this.onInput(event), part: `input${this.error ? ' input-invalid' : ''}`, class: this.error ? 'form-select is-invalid' : 'form-select' }, this.options.map(option => (h("option", { value: option.value }, option.label)))), this.error && h("div", { class: "invalid-feedback", part: "invalid-feedback" }, this.error)));
     }
 };
 SelectInput.style = selectInputCss;
@@ -1849,7 +1849,7 @@ const TextInput = class {
         this.fieldReceivedInput.emit({ name: name, value: target.value });
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label" }, this.label), h("input", { name: this.name, type: "text", onInput: event => this.onInput(event), value: this.internalValue || this.defaultValue, part: `input${this.error ? ' input-invalid' : ''}`, class: this.error ? 'form-control is-invalid' : 'form-control' }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+        return (h(Host, { exportparts: "label,input,input-invalid,invalid-feedback" }, h("label", { part: "label", class: "form-label" }, this.label), h("input", { name: this.name, type: "text", onInput: event => this.onInput(event), value: this.internalValue || this.defaultValue, part: `input${this.error ? ' input-invalid' : ''}`, class: this.error ? 'form-control is-invalid' : 'form-control' }), this.error && h("div", { class: "invalid-feedback", part: "invalid-feedback" }, this.error)));
     }
 };
 TextInput.style = textInputCss;

package/dist/esm/justifi-business-details.entry.js

@@ -1,10 +1,9 @@
-import { r as registerInstance, h, H as Host } from './index-df86d9a2.js';
-import { E as ErrorState } from './utils-d01c5f3a.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-83dcf934.js';
+import { E as ErrorState } from './utils-210fdf39.js';
 import { c as config } from './config-476c7241.js';
 import { A as Api } from './Api-0e88671c.js';
-import { B as Business } from './Business-6cc4e473.js';
-import { g as getErrorMessage } from './utils-546ca6aa.js';
-import './utils-d9e90399.js';
+import { B as Business } from './Business-2410f7e3.js';
+import { C as ComponentErrorSeverity, g as getErrorMessage, a as getErrorCode, b as ComponentErrorCodes } from './utils-4609f32c.js';
 import './state-options-a356fb11.js';
 
 class BusinessService {
@@ -15,6 +14,7 @@ class BusinessService {
 }
 
 const makeGetBusiness = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
+    var _a;
     try {
         const response = await service.fetchBusiness(id, authToken);
         if (!response.error) {
@@ -22,17 +22,28 @@ const makeGetBusiness = ({ id, authToken, service }) => async ({ onSuccess, onEr
         }
         else {
             const responseError = getErrorMessage(response.error);
-            return onError({ error: responseError });
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     catch (error) {
-        return onError({ error: error.message || error });
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };
 
 const BusinessDetails = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.errorEvent = createEvent(this, "error-event", 7);
         this.businessId = undefined;
         this.authToken = undefined;
         this.errorMessage = undefined;
@@ -44,6 +55,11 @@ const BusinessDetails = class {
     initializeGetBusiness() {
         if (!this.businessId || !this.authToken) {
             this.errorMessage = 'Invalid business id or auth token';
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                message: this.errorMessage,
+                severity: ComponentErrorSeverity.ERROR,
+            });
             return;
         }
         this.getBusiness = makeGetBusiness({