@justifi/webcomponents 6.1.0-rc.2 → 6.1.0-rc.3

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

@@ -114,7 +114,7 @@ export class BusinessOwnersFormStepCore {
             return h(PaymentProvisioningLoading, null);
         }
         return (h("div", null, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Owners"), h("form-control-tooltip", { helpText: "For partnerships, LLCs or privately held corporations, the business is required to apply with all individuals with 25% or more ownership to the application. For charities and registered non-profits, the business is required to apply with 1 individual with substantial control over the entity, such as a board member or director." })), h("hr", { class: "mt-2" }), h("div", { class: 'row gy-3' }, this.ownersPayload.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.ownersPayload.length, allowOptionalFields: this.allowOptionalFields, 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.ownersPayload.length, country: this.country, allowOptionalFields: this.allowOptionalFields, ref: (ref) => this.matchRef(ref, owner.id) }));
         })), h("div", { class: 'd-flex justify-content-start' }, h("div", { class: 'gap-2' }, h(Button, { variant: 'primary', onClick: () => this.addOwnerForm(true), hidden: !this.showAddOwnerButton }, "Add Owner")))));
     }
     static get is() { return "justifi-business-owners-form-step-core"; }
@@ -122,7 +122,6 @@ export class BusinessOwnersFormStepCore {
         return {
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -137,11 +136,11 @@ export class BusinessOwnersFormStepCore {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "businessId": {
                 "type": "string",
-                "attribute": "business-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -156,11 +155,11 @@ export class BusinessOwnersFormStepCore {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "business-id"
             },
             "getBusiness": {
                 "type": "unknown",
-                "attribute": "get-business",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -183,7 +182,6 @@ export class BusinessOwnersFormStepCore {
             },
             "patchBusiness": {
                 "type": "unknown",
-                "attribute": "patch-business",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -206,7 +204,6 @@ export class BusinessOwnersFormStepCore {
             },
             "allowOptionalFields": {
                 "type": "boolean",
-                "attribute": "allow-optional-fields",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -221,7 +218,33 @@ export class BusinessOwnersFormStepCore {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "allow-optional-fields"
+            },
+            "country": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CountryCode",
+                    "resolved": "CountryCode.CAN | CountryCode.USA",
+                    "references": {
+                        "CountryCode": {
+                            "location": "import",
+                            "path": "../../../../utils/country-codes",
+                            "id": "src/utils/country-codes.ts::CountryCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "country"
             }
         };
     }

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

@@ -34,14 +34,13 @@ export class BusinessOwnersFormStep {
         }
     }
     render() {
-        return (h(Host, { key: 'aa3b4e716a0592f48180b7dbe2f81662aeb4d6e7' }, h("justifi-business-owners-form-step-core", { key: '8e3ef054061dbe2500aa9f67e4aea53b12e5d432', authToken: this.authToken, businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: (el) => this.coreComponent = el })));
+        return (h(Host, { key: '510b3ece6194fa6c34c04ba4d87718490631b69d' }, h("justifi-business-owners-form-step-core", { key: '01b034456e183d39b6adc4b9f9d36e289483eb9b', authToken: this.authToken, businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, country: this.country, ref: (el) => this.coreComponent = el })));
     }
     static get is() { return "justifi-business-owners-form-step"; }
     static get properties() {
         return {
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -56,11 +55,11 @@ export class BusinessOwnersFormStep {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "businessId": {
                 "type": "string",
-                "attribute": "business-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -75,11 +74,11 @@ export class BusinessOwnersFormStep {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "business-id"
             },
             "allowOptionalFields": {
                 "type": "boolean",
-                "attribute": "allow-optional-fields",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -94,7 +93,33 @@ export class BusinessOwnersFormStep {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "allow-optional-fields"
+            },
+            "country": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CountryCode",
+                    "resolved": "CountryCode.CAN | CountryCode.USA",
+                    "references": {
+                        "CountryCode": {
+                            "location": "import",
+                            "path": "../../../../utils/country-codes",
+                            "id": "src/utils/country-codes.ts::CountryCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "country"
             }
         };
     }

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

@@ -1,9 +1,11 @@
 import { h } from "@stencil/core";
 import { updateAddressFormValues, updateDateOfBirthFormValues, updateFormValues } from "../../utils/input-handlers";
-import { PHONE_MASKS, SSN_MASK } from "../../../../utils/form-input-masks";
-import { heading2 } from "../../../../styles/parts";
+import { PHONE_MASKS, IDENTITY_MASKS } from "../../../../utils/form-input-masks";
+import { heading2, label, inputDisabled, buttonSecondary } from "../../../../styles/parts";
+import { countryLabels } from "../../utils/country-config";
 export class RepresentativeFormInputs {
     constructor() {
+        this.isEditingIdentification = false;
         this.inputHandler = (name, value) => {
             updateFormValues(this.formController, { [name]: value });
         };
@@ -12,15 +14,21 @@ export class RepresentativeFormInputs {
         };
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        return (h("form", { key: 'a2c558b8a6b66d7257fa86ef5f9c1d56a7a273db' }, h("fieldset", { key: '23cb7f2debd4692c39cfe2311ce0d2549ca94ebc' }, h("div", { key: '0c6e94b6a9da6924673f5ebeed93f237ff22a013', class: "d-flex align-items-center gap-2" }, h("legend", { key: 'a165d7dc17dddde2d6ce35af9d836a989f02ffaf', class: "mb-0", part: heading2 }, "Representative"), h("form-control-tooltip", { key: '5c2c29ae9ea82acc6c923c870f4ece5db5e7afb9', helpText: "The representative for your business needs to be someone who has significant control over managing your business\u2019s finance. You will have an opportunity to add owners later in the form." })), h("hr", { key: 'bc481e820461c6ec2088f2879cb9a5837ed02884', class: "mt-2" }), h("div", { key: 'ff4b0731213ddc42ebabb79d49984b83d376f742', class: "row gy-3" }, h("div", { key: '99cac91d3657bce68ce97028342d49cb8a2bb314', class: "col-12 col-md-8" }, h("form-control-text", { key: '534e81b075f732ae3953d8f904199d61a43de4bb', name: "name", label: "Full Name", defaultValue: (_a = this.representativeDefaultValue) === null || _a === void 0 ? void 0 : _a.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '6070fdff99a868b50deb59c9d006d3c4775a50bd', class: "col-12 col-md-4" }, h("form-control-text", { key: 'c92477cc30c5a9c7d99842dff2855edce67185f9', name: "title", label: "Title", defaultValue: (_b = this.representativeDefaultValue) === null || _b === void 0 ? void 0 : _b.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: '14d953417a1ec0292d75251b37b580361def0fb3', class: "col-12 col-md-6" }, h("form-control-text", { key: '42562735066b104619b8aa4da966aaec462f177b', name: "email", label: "Email Address", defaultValue: (_c = this.representativeDefaultValue) === null || _c === void 0 ? void 0 : _c.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'cb7f6173a31fac67edf74844f0807ea94446c59b', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '42b0833d545243c11f515d320aac5408bb744e89', name: "phone", label: "Phone Number", defaultValue: (_d = this.representativeDefaultValue) === null || _d === void 0 ? void 0 : _d.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: 'a9468f20a7d832ae44d771c3b8913c32cf0ef2ab', class: "col-12 col-md-4" }, h("form-control-date", { key: '1f739c1d3bb814710ee159740e459bde72a0e790', name: "dob_full", label: "Birth Date", defaultValue: (_e = this.representativeDefaultValue) === null || _e === void 0 ? void 0 : _e.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: 'e2ecd87320422e1712138115291016f8c1c61ac2', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: 'dd91ffa7877d84cfe315849d18c7cec5bf79b1de', name: "identification_number", label: "SSN", defaultValue: (_f = this.representativeDefaultValue) === null || _f === void 0 ? void 0 : _f.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK, helpText: "Enter your full Social Security Number. It is required for Federal OFAC check." })), h("div", { key: 'ef502c55424287c5c81ca88593f5836d21a2f945', class: "col-12" }, h("justifi-identity-address-form", { key: '26295cbccf0ca23415b4d7c12dc42eb2dbb0d229', errors: this.errors.address, defaultValues: (_g = this.representativeDefaultValue) === null || _g === void 0 ? void 0 : _g.address, handleFormUpdate: this.onAddressFormUpdate }))))));
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return (h("form", { key: '7f2a20427197ce4f402c1b4b859839d506613769' }, h("fieldset", { key: 'fe71959a012c1961b6f91d98862ca4ea9411bf6d' }, h("div", { key: '801fb53d33eeff75f82552da84210abfb1daa55d', class: "d-flex align-items-center gap-2" }, h("legend", { key: '63486b252a7c4f71e944712a833a2edc762c1692', class: "mb-0", part: heading2 }, "Representative"), h("form-control-tooltip", { key: '9a22a232bb856c05ca8c75a0255ea8a2b33b8a80', helpText: "The representative for your business needs to be someone who has significant control over managing your business\u2019s finance. You will have an opportunity to add owners later in the form." })), h("hr", { key: 'b29a6dcd41991b2874cb64fc3cd058f3bcf10a48', class: "mt-2" }), h("div", { key: '52e2b29c6f915f50e1f33c19363657e657355b85', class: "row gy-3" }, h("div", { key: '9531872c804ef3713c0778c6bff1d3ca589bb3d5', class: "col-12 col-md-8" }, h("form-control-text", { key: 'd1eedf80da0790767a6c294f084c4b9d4112b9cf', name: "name", label: "Full Name", defaultValue: (_a = this.representativeDefaultValue) === null || _a === void 0 ? void 0 : _a.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'b5effb996c7b97cd5a8815781474ea32e5bc37b6', class: "col-12 col-md-4" }, h("form-control-text", { key: '554a6fe90a0c68a32ae7e6b0401e43a8a2d6c7fe', name: "title", label: "Title", defaultValue: (_b = this.representativeDefaultValue) === null || _b === void 0 ? void 0 : _b.title, errorText: this.errors.title, inputHandler: this.inputHandler, helpText: "Role at your business, e.g. President, CEO, Treasurer." })), h("div", { key: '6025d1b2b67120a9e9e25d0a6e3e352651759c62', class: "col-12 col-md-6" }, h("form-control-text", { key: 'ed758eafa726ee6801c16535fbba7d05886c21d5', name: "email", label: "Email Address", defaultValue: (_c = this.representativeDefaultValue) === null || _c === void 0 ? void 0 : _c.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '933650753a5fdc6f75db658baf536ce4033e0e6c', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '81ba9debb6c8fd8225c67a0c0a6b8612e87fc3f0', name: "phone", label: "Phone Number", defaultValue: (_d = this.representativeDefaultValue) === null || _d === void 0 ? void 0 : _d.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '913c766d6eb5fe5f132eafecba91145a6c418dae', class: "col-12 col-md-4" }, h("form-control-date", { key: 'c50e5ad2022906d753b783e7892be8322d80661c', name: "dob_full", label: "Birth Date", defaultValue: (_e = this.representativeDefaultValue) === null || _e === void 0 ? void 0 : _e.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: (e) => updateDateOfBirthFormValues(e, this.formController), helpText: "Must be 18 or older." })), h("div", { key: '74492ad88a4962c2abfd04319880edb757d78796', class: "col-12 col-md-8" }, (!((_f = this.representativeDefaultValue) === null || _f === void 0 ? void 0 : _f.ssn_last4) || this.isEditingIdentification) ? (h("form-control-number-masked", { name: "identification_number", label: countryLabels[this.country].idNumberLabel, defaultValue: this.isEditingIdentification ? '' : (_g = this.representativeDefaultValue) === null || _g === void 0 ? void 0 : _g.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: IDENTITY_MASKS[this.country], helpText: countryLabels[this.country].identityHelpText })) : (h("div", null, h("label", { class: "form-label", part: label }, countryLabels[this.country].idNumberLabel), h("div", { class: "input-group mb-3" }, h("input", { type: "text", class: "form-control", part: inputDisabled, value: `****${(_h = this.representativeDefaultValue) === null || _h === void 0 ? void 0 : _h.ssn_last4}`, disabled: true }), h("button", { class: "btn btn-secondary", type: "button", part: buttonSecondary, onClick: () => {
+                this.isEditingIdentification = true;
+                // Clear last4 and current value to force validation
+                updateFormValues(this.formController, {
+                    ssn_last4: null,
+                    identification_number: ''
+                });
+            } }, "Change"))))), h("div", { key: 'ad29d30e0748004e9c0d429804210f269581ff12', class: "col-12" }, h("justifi-identity-address-form", { key: 'aaad43f4c150cf08cbdd321a887eaadc51436c88', errors: this.errors.address, defaultValues: (_j = this.representativeDefaultValue) === null || _j === void 0 ? void 0 : _j.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))))));
     }
     static get is() { return "justifi-business-representative-form-inputs"; }
     static get properties() {
         return {
             "representativeDefaultValue": {
                 "type": "any",
-                "attribute": "representative-default-value",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -35,11 +43,11 @@ export class RepresentativeFormInputs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "representative-default-value"
             },
             "errors": {
                 "type": "any",
-                "attribute": "errors",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -54,11 +62,11 @@ export class RepresentativeFormInputs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "errors"
             },
             "formController": {
                 "type": "unknown",
-                "attribute": "form-controller",
                 "mutable": false,
                 "complexType": {
                     "original": "FormController",
@@ -79,8 +87,38 @@ export class RepresentativeFormInputs {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "country": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CountryCode",
+                    "resolved": "CountryCode.CAN | CountryCode.USA",
+                    "references": {
+                        "CountryCode": {
+                            "location": "import",
+                            "path": "../../../../utils/country-codes",
+                            "id": "src/utils/country-codes.ts::CountryCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "country"
             }
         };
     }
+    static get states() {
+        return {
+            "isEditingIdentification": {}
+        };
+    }
 }
 ;

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { Representative } from "../../../../api/Identity";
 import { FormController } from "../../../../ui-components/form/form";
-import { identitySchema } from "../../schemas/business-identity-schema";
+import { identitySchemaByCountry } from "../../schemas/business-identity-schema";
 import { PaymentProvisioningLoading } from "../payment-provisioning-loading";
 import { BusinessFormStep } from "../../utils";
 export class BusinessRepresentativeFormStepCore {
@@ -10,11 +10,14 @@ export class BusinessRepresentativeFormStepCore {
         this.representative = {};
         this.isLoading = false;
         this.getData = () => {
+            if (!this.getBusiness)
+                return;
             this.formLoading.emit(true);
             this.isLoading = true;
             this.getBusiness({
                 onSuccess: (response) => {
                     this.representative = new Representative(response.data.representative || {});
+                    this.representative.address.country = this.country;
                     this.formController.setInitialValues(Object.assign({}, this.representative));
                 },
                 onError: ({ error, code, severity }) => {
@@ -62,8 +65,9 @@ export class BusinessRepresentativeFormStepCore {
         return { representative: formValues };
     }
     componentWillLoad() {
-        this.getBusiness && this.getData();
-        this.formController = new FormController(identitySchema('representative', this.allowOptionalFields));
+        const schemaFactory = identitySchemaByCountry[this.country];
+        this.formController = new FormController(schemaFactory('representative', this.allowOptionalFields));
+        this.getData();
     }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => {
@@ -74,14 +78,13 @@ export class BusinessRepresentativeFormStepCore {
         if (this.isLoading) {
             return (h(PaymentProvisioningLoading, null));
         }
-        return (h("justifi-business-representative-form-inputs", { representativeDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController }));
+        return (h("justifi-business-representative-form-inputs", { representativeDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController, country: this.country }));
     }
     static get is() { return "justifi-business-representative-form-step-core"; }
     static get properties() {
         return {
             "getBusiness": {
                 "type": "unknown",
-                "attribute": "get-business",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -104,7 +107,6 @@ export class BusinessRepresentativeFormStepCore {
             },
             "patchBusiness": {
                 "type": "unknown",
-                "attribute": "patch-business",
                 "mutable": false,
                 "complexType": {
                     "original": "Function",
@@ -127,7 +129,6 @@ export class BusinessRepresentativeFormStepCore {
             },
             "allowOptionalFields": {
                 "type": "boolean",
-                "attribute": "allow-optional-fields",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -142,7 +143,33 @@ export class BusinessRepresentativeFormStepCore {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "allow-optional-fields"
+            },
+            "country": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CountryCode",
+                    "resolved": "CountryCode.CAN | CountryCode.USA",
+                    "references": {
+                        "CountryCode": {
+                            "location": "import",
+                            "path": "../../../../utils/country-codes",
+                            "id": "src/utils/country-codes.ts::CountryCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "country"
             }
         };
     }

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

@@ -34,14 +34,13 @@ export class BusinessRepresentativeFormStep {
         }
     }
     render() {
-        return (h("justifi-business-representative-form-step-core", { key: '241cd9ff1afae3bf1f9107cf6f66392b7b656471', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-business-representative-form-step-core", { key: '93ebeaecfc5eecc8a4c74cbc30760d35d8120183', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, country: this.country, ref: el => this.coreComponent = el }));
     }
     static get is() { return "justifi-business-representative-form-step"; }
     static get properties() {
         return {
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -56,11 +55,11 @@ export class BusinessRepresentativeFormStep {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "businessId": {
                 "type": "string",
-                "attribute": "business-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -75,11 +74,11 @@ export class BusinessRepresentativeFormStep {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "business-id"
             },
             "allowOptionalFields": {
                 "type": "boolean",
-                "attribute": "allow-optional-fields",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -94,7 +93,33 @@ export class BusinessRepresentativeFormStep {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "allow-optional-fields"
+            },
+            "country": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CountryCode",
+                    "resolved": "CountryCode.CAN | CountryCode.USA",
+                    "references": {
+                        "CountryCode": {
+                            "location": "import",
+                            "path": "../../../../utils/country-codes",
+                            "id": "src/utils/country-codes.ts::CountryCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "country"
             }
         };
     }

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

@@ -0,0 +1,101 @@
+import { h, Host } from "@stencil/core";
+import { CountryCode } from "../../../../utils/country-codes";
+import { numberOnlyHandler } from "../../../../ui-components/form/utils";
+import { countryLabels, countryOptions } from "../../utils/country-config";
+export class FormAddressFields {
+    constructor() {
+        this.country = CountryCode.USA;
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const labels = countryLabels[this.country];
+        const options = countryOptions[this.country];
+        return (h(Host, { key: '429dd1250553f6d25f9db6d6c1379af0290718c6' }, h("div", { key: '91b9d7199bea1620c7614efd25c0421d3f85c19d', class: "row gy-3" }, h("div", { key: '13dd91b17d387ef9c8bc97b44a273f0984758a3a', class: "col-12" }, h("form-control-text", { key: '52ecc715696aed27a6f4329971e90e90ebb971fa', name: "line1", label: "Street Address", inputHandler: this.inputHandler, defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, helpText: "No PO Boxes." })), h("div", { key: '64bc39361d02b10c75dfc8389915ce192b9f7606', class: "col-12" }, h("form-control-text", { key: 'a835f2f9706664dd195daa5436fe49aea2c54968', name: "line2", label: "Address Line 2 (optional)", inputHandler: this.inputHandler, defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2 })), h("div", { key: 'ef9b02103d0d1469da092d8965d021b049e54cb5', class: "col-12" }, h("form-control-text", { key: '9263360f47c6e833a904aab2e8b30d4a35d50e75', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city })), h("div", { key: '4609534e39659ed47350e68a64fee58616320da4', class: "col-12" }, h("form-control-select", { key: 'a7f94fa5ea2642cae82729951198771fd1f31380', name: "state", label: labels.stateLabel, options: options.stateOptions, inputHandler: this.inputHandler, defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state })), h("div", { key: 'eadf0a6e2e2cfbe8e476ba8abb25eab4b2b005fb', class: "col-12" }, h("form-control-text", { key: '2708d2a47c8afccc470203775d494683f133174b', name: "postal_code", label: labels.postalLabel, inputHandler: this.inputHandler, defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, errorText: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: this.country === CountryCode.USA ? 5 : 7, keyDownHandler: this.country === CountryCode.USA ? numberOnlyHandler : undefined })))));
+    }
+    static get is() { return "justifi-form-address-fields"; }
+    static get properties() {
+        return {
+            "country": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CountryCode",
+                    "resolved": "CountryCode.CAN | CountryCode.USA",
+                    "references": {
+                        "CountryCode": {
+                            "location": "import",
+                            "path": "../../../../utils/country-codes",
+                            "id": "src/utils/country-codes.ts::CountryCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "country",
+                "defaultValue": "CountryCode.USA"
+            },
+            "errors": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "errors"
+            },
+            "defaultValues": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-values"
+            },
+            "inputHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(name: string, value: string) => void",
+                    "resolved": "(name: string, value: string) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}