@justifi/webcomponents 4.10.0 → 4.12.0

package/dist/collection/components/business-forms/payment-provisioning/additional-questions/business-additional-questions-form-step.js

@@ -3,7 +3,7 @@ import { FormController } from "../../../form/form";
 import { AdditionalQuestions } from "../../../../api/Business";
 import { Api } from "../../../../api";
 import { config } from "../../../../../config";
-import { additionQuestionsSchema } from "../../schemas/business-additional-questions-schema";
+import { additionalQuestionsSchema } from "../../schemas/business-additional-questions-schema";
 import { BusinessFormServerErrors } from "../../utils/business-form-types";
 /**
  * @exportedPart label: Label for inputs
@@ -45,6 +45,7 @@ export class AdditionalQuestionsFormStep {
         };
         this.authToken = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.formController = undefined;
         this.errors = {};
         this.additional_questions = {};
@@ -72,7 +73,7 @@ export class AdditionalQuestionsFormStep {
             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();
     }
@@ -121,6 +122,23 @@ export class AdditionalQuestionsFormStep {
                 },
                 "attribute": "business-id",
                 "reflect": false
+            },
+            "allowOptionalFields": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "allow-optional-fields",
+                "reflect": false
             }
         };
     }

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

@@ -1,5 +1,4 @@
 import { Host, h } from "@stencil/core";
-import { BusinessTypeOptions, BusinessStructureOptions } from "../../utils/business-form-select-options";
 import { FormController } from "../../../form/form";
 import { PHONE_MASKS, TAX_ID_MASKS } from "../../../../utils/form-input-masks";
 import { CoreBusinessInfo } from "../../../../api/Business";
@@ -8,7 +7,7 @@ import { businessCoreInfoSchema } from "../../schemas/business-core-info-schema"
 import { config } from "../../../../../config";
 import { parseCoreInfo } from "../../utils/payload-parsers";
 import { flattenNestedObject } from "../../../../utils/utils";
-import { BusinessFormServerErrors } from "../../utils/business-form-types";
+import { BusinessFormServerErrors, BusinessTypeOptions } from "../../utils/business-form-types";
 /**
  *
  * The difference between this component and business-generic-info-details
@@ -54,6 +53,7 @@ export class BusinessCoreInfoFormStep {
         };
         this.authToken = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.formController = undefined;
         this.errors = {};
         this.coreInfo = {};
@@ -81,7 +81,7 @@ export class BusinessCoreInfoFormStep {
             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();
     }
@@ -93,7 +93,7 @@ export class BusinessCoreInfoFormStep {
     }
     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 })))))));
     }
     static get is() { return "justifi-business-core-info-form-step"; }
     static get originalStyleUrls() {
@@ -141,6 +141,23 @@ export class BusinessCoreInfoFormStep {
                 },
                 "attribute": "business-id",
                 "reflect": false
+            },
+            "allowOptionalFields": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "allow-optional-fields",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/business-forms/payment-provisioning/business-owners/business-owners-form-step.js

@@ -1,8 +1,8 @@
 import { Host, h } from "@stencil/core";
-import { BusinessFormServerErrors } from "../../utils/business-form-types";
 import { Api } from "../../../../api";
 import { config } from "../../../../../config";
 import { Owner } from "../../../../api/Identity";
+import { BusinessFormServerErrors, OwnerFormClickActions } from "../../utils/business-form-types";
 /**
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
@@ -55,10 +55,11 @@ export class BusinessOwnersFormStep {
                 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);
@@ -78,6 +79,7 @@ export class BusinessOwnersFormStep {
         };
         this.authToken = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.owners = [];
         this.newFormOpen = undefined;
         this.refs = [];
@@ -130,9 +132,9 @@ export class BusinessOwnersFormStep {
     }
     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 is() { return "justifi-business-owners-form-step"; }
     static get originalStyleUrls() {
@@ -180,6 +182,23 @@ export class BusinessOwnersFormStep {
                 },
                 "attribute": "business-id",
                 "reflect": false
+            },
+            "allowOptionalFields": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "allow-optional-fields",
+                "reflect": false
             }
         };
     }
@@ -212,6 +231,27 @@ export class BusinessOwnersFormStep {
                         }
                     }
                 }
+            }, {
+                "method": "clickEvent",
+                "name": "click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "OwnerFormClickEvent",
+                    "resolved": "OwnerFormClickEvent",
+                    "references": {
+                        "OwnerFormClickEvent": {
+                            "location": "import",
+                            "path": "../../utils/business-form-types",
+                            "id": "src/components/business-forms/utils/business-form-types.ts::OwnerFormClickEvent"
+                        }
+                    }
+                }
             }, {
                 "method": "formLoading",
                 "name": "formLoading",

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

@@ -3,10 +3,11 @@ import { FormController } from "../../../form/form";
 import { PHONE_MASKS } from "../../../../utils/form-input-masks";
 import Api from "../../../../api/Api";
 import { parseIdentityInfo } from "../../utils/payload-parsers";
-import { representativeSchema } from "../../schemas/business-identity-schema";
+import { identitySchema } from "../../schemas/business-identity-schema";
 import { config } from "../../../../../config";
 import { BusinessFormServerErrors } from "../../utils/business-form-types";
 import { Representative } from "../../../../api/Identity";
+import { deconstructDate } from "../../utils/helpers";
 export class BusinessRepresentativeFormStep {
     constructor() {
         this.fetchData = async () => {
@@ -43,8 +44,18 @@ export class BusinessRepresentativeFormStep {
         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 = {};
@@ -72,7 +83,7 @@ export class BusinessRepresentativeFormStep {
             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();
     }
@@ -82,10 +93,7 @@ export class BusinessRepresentativeFormStep {
     }
     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 })))))));
     }
     static get is() { return "justifi-business-representative-form-step"; }
     static get originalStyleUrls() {
@@ -133,6 +141,23 @@ export class BusinessRepresentativeFormStep {
                 },
                 "attribute": "business-id",
                 "reflect": false
+            },
+            "allowOptionalFields": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "allow-optional-fields",
+                "reflect": false
             }
         };
     }

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

@@ -3,10 +3,11 @@ import { FormController } from "../../../form/form";
 import Api from "../../../../api/Api";
 import { Address } from "../../../../api/Business";
 import { parseAddressInfo } from "../../utils/payload-parsers";
-import { legalAddressSchema } from "../../schemas/business-address-schema";
+import { addressSchema } from "../../schemas/business-address-schema";
 import { config } from "../../../../../config";
 import { BusinessFormServerErrors } from "../../utils/business-form-types";
 import StateOptions from "../../../../utils/state-options";
+import { filterPostalInput } from "../../../form/utils";
 /**
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
@@ -47,6 +48,7 @@ export class LegalAddressFormStep {
         };
         this.authToken = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.formController = undefined;
         this.errors = {};
         this.legal_address = {};
@@ -74,7 +76,7 @@ export class LegalAddressFormStep {
             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();
     }
@@ -83,9 +85,9 @@ export class LegalAddressFormStep {
         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 })))))));
     }
@@ -135,6 +137,23 @@ export class LegalAddressFormStep {
                 },
                 "attribute": "business-id",
                 "reflect": false
+            },
+            "allowOptionalFields": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "allow-optional-fields",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning.js

@@ -10,11 +10,17 @@ export class PaymentProvisioning {
     constructor() {
         this.refs = [];
         this.componentStepMapping = {
-            0: () => h("justifi-business-core-info-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[0] = el, onFormLoading: (e) => this.handleFormLoading(e), onServerError: (e) => this.handleServerErrors(e) }),
-            1: () => h("justifi-legal-address-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[1] = el, onFormLoading: (e) => this.handleFormLoading(e), onServerError: (e) => this.handleServerErrors(e) }),
-            2: () => h("justifi-additional-questions-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[2] = el, onFormLoading: (e) => this.handleFormLoading(e), onServerError: (e) => this.handleServerErrors(e) }),
-            3: () => h("justifi-business-representative-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[3] = el, onFormLoading: (e) => this.handleFormLoading(e), onServerError: (e) => this.handleServerErrors(e) }),
-            4: () => h("justifi-business-owners-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[4] = el, onFormLoading: (e) => this.handleFormLoading(e), onServerError: (e) => this.handleServerErrors(e) }),
+            0: () => h("justifi-business-core-info-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[0] = el, onFormLoading: this.handleFormLoading, onServerError: this.handleServerErrors, allowOptionalFields: this.allowOptionalFields }),
+            1: () => h("justifi-legal-address-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[1] = el, onFormLoading: this.handleFormLoading, onServerError: this.handleServerErrors, allowOptionalFields: this.allowOptionalFields }),
+            2: () => h("justifi-additional-questions-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[2] = el, onFormLoading: this.handleFormLoading, onServerError: this.handleServerErrors, allowOptionalFields: this.allowOptionalFields }),
+            3: () => h("justifi-business-representative-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[3] = el, onFormLoading: this.handleFormLoading, onServerError: this.handleServerErrors, allowOptionalFields: this.allowOptionalFields }),
+            4: () => h("justifi-business-owners-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[4] = el, onFormLoading: this.handleFormLoading, onServerError: this.handleServerErrors, allowOptionalFields: this.allowOptionalFields }),
+        };
+        this.handleFormLoading = (e) => {
+            this.formLoading = e.detail;
+        };
+        this.handleServerErrors = (e) => {
+            this.errorMessage = e.detail.message;
         };
         this.incrementSteps = () => {
             if (this.currentStep < this.totalSteps) {
@@ -26,11 +32,17 @@ export class PaymentProvisioning {
         this.businessId = undefined;
         this.testMode = false;
         this.hideErrors = false;
+        this.allowOptionalFields = false;
+        this.formTitle = 'Business Information';
+        this.removeTitle = false;
         this.formLoading = false;
         this.errorMessage = '';
         this.currentStep = 0;
         this.totalSteps = 5;
     }
+    get title() {
+        return this.removeTitle ? '' : this.formTitle;
+    }
     get showErrors() {
         return this.errorMessage && !this.hideErrors;
     }
@@ -47,12 +59,6 @@ export class PaymentProvisioning {
         this.refs = [this.coreInfoRef, this.legalAddressRef, this.additionalQuestionsRef, this.representativeRef, this.ownersRef];
         this.totalSteps = Object.keys(this.componentStepMapping).length - 1;
     }
-    handleFormLoading(e) {
-        this.formLoading = e.detail;
-    }
-    handleServerErrors(e) {
-        this.errorMessage = e.detail.message;
-    }
     showPreviousStepButton() {
         return this.currentStep > 0;
     }
@@ -61,8 +67,7 @@ export class PaymentProvisioning {
     }
     previousStepButtonOnClick() {
         this.clickEvent.emit({ name: BusinessFormClickActions.previousStep });
-        const currentStep = this.refs[this.currentStep];
-        currentStep.validateAndSubmit({ onSuccess: this.decrementSteps });
+        this.decrementSteps();
     }
     nextStepButtonOnClick(e, clickEventName) {
         e.preventDefault();
@@ -77,7 +82,7 @@ export class PaymentProvisioning {
         return this.componentStepMapping[this.currentStep]();
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("h1", null, "Business Information"), this.showErrors && FormAlert(this.errorMessage), 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.formLoading }, "Previous")), this.showNextStepButton() && (h("button", { type: "button", class: `btn btn-primary jfi-submit-button${this.formLoading ? ' jfi-submit-button-loading' : ''}`, onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formLoading }, this.formLoading ? LoadingSpinner() : 'Next')), this.showSubmitButton() && (h("button", { type: "submit", class: `btn btn-primary jfi-submit-button${this.formLoading ? ' jfi-submit-button-loading' : ''}`, onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formLoading }, this.formLoading ? LoadingSpinner() : 'Submit'))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("h1", null, this.title), this.showErrors && FormAlert(this.errorMessage), 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.formLoading }, "Previous")), this.showNextStepButton() && (h("button", { type: "button", class: `btn btn-primary jfi-submit-button${this.formLoading ? ' jfi-submit-button-loading' : ''}`, onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formLoading }, this.formLoading ? LoadingSpinner() : 'Next')), this.showSubmitButton() && (h("button", { type: "submit", class: `btn btn-primary jfi-submit-button${this.formLoading ? ' jfi-submit-button-loading' : ''}`, onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formLoading }, this.formLoading ? LoadingSpinner() : 'Submit'))))));
     }
     static get is() { return "justifi-payment-provisioning"; }
     static get originalStyleUrls() {
@@ -161,6 +166,60 @@ export class PaymentProvisioning {
                 "attribute": "hide-errors",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "allowOptionalFields": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "allow-optional-fields",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "formTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "form-title",
+                "reflect": false,
+                "defaultValue": "'Business Information'"
+            },
+            "removeTitle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "remove-title",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -175,7 +234,7 @@ export class PaymentProvisioning {
     static get events() {
         return [{
                 "method": "clickEvent",
-                "name": "clickEvent",
+                "name": "click-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/business-forms/schemas/business-additional-questions-schema.js

@@ -1,7 +1,16 @@
 import { object, string } from "yup";
-export 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'),
-});
+export const additionalQuestionsSchema = (allowOptionalFields) => {
+    const schema = 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 easySchema = object({
+        business_revenue: string().nullable(),
+        business_payment_volume: string().nullable(),
+        business_dispute_volume: string().nullable(),
+        business_receivable_volume: string().nullable()
+    });
+    return allowOptionalFields ? easySchema : schema;
+};

package/dist/collection/components/business-forms/schemas/business-address-schema.js

@@ -1,16 +1,42 @@
 import { object, string } from "yup";
 import StateOptions from "../../../utils/state-options";
-export const legalAddressSchema = object({
-    line1: string().required('Enter street address'),
-    line2: string().nullable(),
-    city: string().required('Enter city'),
-    state: string().required('Select state').oneOf(StateOptions.map((option) => option.value), 'Select state'),
-    postal_code: string().required('Enter postal code'),
-    country: string().required('Select country'),
-});
-export const identityAddressSchema = object({
-    line1: string().required('Enter street address'),
-    city: string().required('Enter city'),
-    state: string().required('Select state').oneOf(StateOptions.map((option) => option.value), 'Select state'),
-    postal_code: string().required('Enter postal code'),
-});
+import { transformEmptyString } from "./schema-helpers";
+const lineOneValidation = string()
+    .min(5, 'Address must be at least 5 characters')
+    .max(100, 'Address must be less than 100 characters')
+    .matches(/^(?!^\s+$)[a-zA-Z0-9\s,.'-]*$/, 'Enter valid address line 1')
+    .transform(transformEmptyString);
+const lineTwoValidation = string()
+    .max(100, 'Address must be less than 100 characters')
+    .matches(/^(?!^\s+$)[a-zA-Z0-9\s,.'-]*$/, 'Enter valid address line 2')
+    .transform(transformEmptyString);
+const cityValidation = string()
+    .min(2, 'City must be at least 2 characters')
+    .max(50, 'City must be less than 50 characters')
+    .matches(/^(?!^\s+$)[a-zA-Z\s]*$/, 'Enter valid city')
+    .transform(transformEmptyString);
+const stateValidation = string()
+    .oneOf(StateOptions.map((option) => option.value), 'Select state')
+    .transform(transformEmptyString);
+const postalValidation = string()
+    .matches(/^[0-9]{5}$/, 'Enter valid postal code')
+    .transform(transformEmptyString);
+export const addressSchema = (allowOptionalFields) => {
+    const schema = object({
+        line1: lineOneValidation.required('Enter street address'),
+        line2: lineTwoValidation.nullable(),
+        city: cityValidation.required('Enter city'),
+        state: stateValidation.required('Select state'),
+        postal_code: postalValidation.required('Enter postal code'),
+        country: string().required('Select country')
+    });
+    const easySchema = object({
+        line1: lineOneValidation.nullable(),
+        line2: lineTwoValidation.nullable(),
+        city: cityValidation.nullable(),
+        state: stateValidation.nullable(),
+        postal_code: postalValidation.nullable(),
+        country: string().required('Select country')
+    });
+    return allowOptionalFields ? easySchema : schema;
+};