@justifi/webcomponents 4.10.0-rc.0 → 4.11.0

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

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

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

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

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

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

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

@@ -4,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/{business-form-stepped → payment-provisioning}/additional-questions/business-additional-questions-form-step.js

@@ -1,8 +1,9 @@
 import { Host, h } from "@stencil/core";
 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
@@ -15,8 +16,8 @@ export class AdditionalQuestionsFormStep {
             this.formLoading.emit(true);
             try {
                 const response = await this.api.get(this.businessEndpoint);
-                this.additional_questions = response.data.additional_questions;
-                this.formController.setInitialValues(this.additional_questions);
+                this.additional_questions = new AdditionalQuestions(response.data.additional_questions || {});
+                this.formController.setInitialValues(Object.assign({}, this.additional_questions));
             }
             catch (error) {
                 this.serverError.emit({ data: error, message: BusinessFormServerErrors.fetchData });
@@ -44,6 +45,7 @@ export class AdditionalQuestionsFormStep {
         };
         this.authToken = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.formController = undefined;
         this.errors = {};
         this.additional_questions = {};
@@ -71,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();
     }
@@ -120,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/{business-form-stepped → 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/{business-form-stepped → 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/{business-form-stepped → payment-provisioning}/business-representative/business-representative-form-step.js

@@ -3,17 +3,18 @@ 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";
 export class BusinessRepresentativeFormStep {
     constructor() {
         this.fetchData = async () => {
             this.formLoading.emit(true);
             try {
                 const response = await this.api.get(this.businessEndpoint);
-                this.representative = response.data.representative;
-                this.formController.setInitialValues(this.representative);
+                this.representative = new Representative(response.data.representative || {});
+                this.formController.setInitialValues(Object.assign({}, this.representative));
             }
             catch (error) {
                 this.serverError.emit({ data: error, message: BusinessFormServerErrors.fetchData });
@@ -44,6 +45,7 @@ export class BusinessRepresentativeFormStep {
         };
         this.authToken = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.formController = undefined;
         this.errors = {};
         this.representative = {};
@@ -71,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();
     }
@@ -81,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() {
@@ -132,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/{business-form-stepped → payment-provisioning}/legal-address-form/legal-address-form-step.js

@@ -3,9 +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
@@ -46,6 +48,7 @@ export class LegalAddressFormStep {
         };
         this.authToken = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.formController = undefined;
         this.errors = {};
         this.legal_address = {};
@@ -73,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();
     }
@@ -82,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-text", { name: "state", label: "State", 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 })))))));
     }
@@ -134,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
             }
         };
     }