@justifi/webcomponents 4.10.0 → 4.11.0

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

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

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

@@ -4,14 +4,16 @@ import { PHONE_MASKS } from "../../../utils/form-input-masks";
 import { Api } from "../../../api";
 import { Owner } from "../../../api/Identity";
 import { parseIdentityInfo } from "../utils/payload-parsers";
-import { ownerSchema } from "../schemas/business-identity-schema";
+import { identitySchema } from "../schemas/business-identity-schema";
 import { config } from "../../../../config";
 import { LoadingSpinner } from "../../form/utils";
-import { OwnerFormServerErrors } from "../utils/business-form-types";
+import { OwnerFormServerErrors, OwnerFormClickActions } from "../utils/business-form-types";
 export class BusinessOwnerForm {
     constructor() {
         this.fetchData = async () => {
             if (!this.ownerId) {
+                this.owner = Object.assign({}, new Owner({}));
+                this.formController.setInitialValues(this.owner);
                 return;
             }
             this.isLoading = true;
@@ -55,6 +57,14 @@ export class BusinessOwnerForm {
         this.onAddressFormUpdate = (values) => {
             this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { address: Object.assign(Object.assign({}, this.formController.values.getValue().address), values) }));
         };
+        this.handleAddOwner = () => {
+            const eventName = this.ownerId ? OwnerFormClickActions.updateOwner : OwnerFormClickActions.addOwner;
+            this.clickEvent.emit({ name: eventName });
+        };
+        this.handleRemoveOwner = () => {
+            this.removeOwner(this.ownerId);
+            this.clickEvent.emit({ name: OwnerFormClickActions.removeOwner });
+        };
         this.validateAndSubmit = (event) => {
             event.preventDefault();
             const isValid = this.formController.validate();
@@ -65,6 +75,7 @@ export class BusinessOwnerForm {
         this.authToken = undefined;
         this.ownerId = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.removeOwner = undefined;
         this.newFormOpen = undefined;
         this.ownersLength = undefined;
@@ -114,7 +125,7 @@ export class BusinessOwnerForm {
         const missingAuthTokenMessage = 'Warning: Missing auth-token. The form will not be functional without it.';
         if (!this.authToken)
             console.error(missingAuthTokenMessage);
-        this.formController = new FormController(ownerSchema);
+        this.formController = new FormController(identitySchema('owner', this.allowOptionalFields));
         this.api = Api(this.authToken, config.proxyApiOrigin);
         this.fetchData();
     }
@@ -130,11 +141,8 @@ export class BusinessOwnerForm {
     }
     render() {
         const ownerDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", { onSubmit: this.validateAndSubmit }, h("fieldset", null, h("legend", null, this.formTitle), h("div", { class: 'row gy-3' }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-select", { name: "title", label: "Prefix", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.title, options: [
-                { label: 'Select Prefix', value: '' },
-                { label: 'Mrs.', value: 'Mrs.' },
-            ], error: this.errors.title, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12" }, h("label", { part: "label", class: "form-label" }, "Birth Date")), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_day", label: "Day", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.dob_day, error: this.errors.dob_day, inputHandler: this.inputHandler, type: "day" })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_month", label: "Month", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.dob_month, error: this.errors.dob_month, inputHandler: this.inputHandler, type: "month" })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_year", label: "Year", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.dob_year, error: this.errors.dob_year, inputHandler: this.inputHandler, type: "year" })), h("div", { class: "col-12" }, h("form-control-number", { name: "identification_number", label: "EIN/SSN", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("justifi-business-address-form", { errors: this.errors.address, defaultValues: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.address, handleFormUpdate: values => this.onAddressFormUpdate(values) })), h("div", { class: "container d-flex gap-2" }, h("button", { type: "submit", class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}`, disabled: this.isLoading }, this.isLoading ? LoadingSpinner() : this.submitButtonText), this.showRemoveButton &&
-            h("button", { type: "button", class: "btn btn-danger", onClick: () => this.removeOwner(this.ownerId) }, "Remove owner"))), h("hr", null)))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", { onSubmit: this.validateAndSubmit }, h("fieldset", null, h("legend", null, this.formTitle), h("div", { class: 'row gy-3' }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "name", label: "Full Name", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-text", { name: "title", label: "Title", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.title, error: this.errors.title, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { class: "col-12" }, h("label", { part: "label", class: "form-label" }, "Birth Date")), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_day", label: "Day", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.dob_day, error: this.errors.dob_day, inputHandler: this.inputHandler, type: "day" })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_month", label: "Month", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.dob_month, error: this.errors.dob_month, inputHandler: this.inputHandler, type: "month" })), h("div", { class: "col-12 col-md-4" }, h("form-control-datepart", { name: "dob_year", label: "Year", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.dob_year, error: this.errors.dob_year, inputHandler: this.inputHandler, type: "year" })), h("div", { class: "col-12" }, h("form-control-number", { name: "identification_number", label: "EIN/SSN", defaultValue: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.identification_number, error: this.errors.identification_number, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("justifi-identity-address-form", { errors: this.errors.address, defaultValues: ownerDefaultValue === null || ownerDefaultValue === void 0 ? void 0 : ownerDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate })), h("div", { class: "container d-flex gap-2" }, h("button", { type: "submit", class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}`, onClick: () => this.handleAddOwner(), disabled: this.isLoading }, this.isLoading ? LoadingSpinner() : this.submitButtonText), this.showRemoveButton &&
+            h("button", { type: "button", class: "btn btn-danger", onClick: () => this.handleRemoveOwner() }, "Remove owner"))), h("hr", null)))));
     }
     static get is() { return "justifi-owner-form"; }
     static get encapsulation() { return "shadow"; }
@@ -201,6 +209,23 @@ export class BusinessOwnerForm {
                 "attribute": "business-id",
                 "reflect": false
             },
+            "allowOptionalFields": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "allow-optional-fields",
+                "reflect": false
+            },
             "removeOwner": {
                 "type": "unknown",
                 "mutable": false,
@@ -282,6 +307,27 @@ export class BusinessOwnerForm {
                         }
                     }
                 }
+            }, {
+                "method": "clickEvent",
+                "name": "click-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "OwnerFormClickEvent",
+                    "resolved": "OwnerFormClickEvent",
+                    "references": {
+                        "OwnerFormClickEvent": {
+                            "location": "import",
+                            "path": "../utils/business-form-types",
+                            "id": "src/components/business-forms/utils/business-form-types.ts::OwnerFormClickEvent"
+                        }
+                    }
+                }
             }, {
                 "method": "formLoading",
                 "name": "formLoading",

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

@@ -54,6 +54,7 @@ export class BusinessCoreInfoFormStep {
         };
         this.authToken = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.formController = undefined;
         this.errors = {};
         this.coreInfo = {};
@@ -81,7 +82,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();
     }
@@ -141,6 +142,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,7 +3,7 @@ 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";
@@ -45,6 +45,7 @@ export class BusinessRepresentativeFormStep {
         };
         this.authToken = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.formController = undefined;
         this.errors = {};
         this.representative = {};
@@ -72,7 +73,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 +83,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" }, 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-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 +131,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,6 +32,7 @@ export class PaymentProvisioning {
         this.businessId = undefined;
         this.testMode = false;
         this.hideErrors = false;
+        this.allowOptionalFields = false;
         this.formLoading = false;
         this.errorMessage = '';
         this.currentStep = 0;
@@ -47,12 +54,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 +62,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();
@@ -161,6 +161,24 @@ 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"
             }
         };
     }
@@ -175,7 +193,7 @@ export class PaymentProvisioning {
     static get events() {
         return [{
                 "method": "clickEvent",
-                "name": "clickEvent",
+                "name": "click-event",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,