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

package/dist/module/business-core-info.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as businessClassificationOptions } from './business-form-options.js';
-import { T as TAX_ID_MASKS, P as PHONE_MASKS } from './form-input-masks.js';
+import { I as IDENTITY_MASKS, P as PHONE_MASKS } from './form-input-masks.js';
 import { C as CoreBusinessInfo } from './Business.js';
-import { h as heading2 } from './parts.js';
+import { h as heading2, l as label, c as inputDisabled, X as buttonSecondary } from './parts.js';
+import { c as countryLabels } from './country-config.js';
 import { d as defineCustomElement$6 } from './custom-popper2.js';
 import { d as defineCustomElement$5 } from './form-control-date2.js';
 import { d as defineCustomElement$4 } from './form-control-number-masked2.js';
@@ -18,6 +19,7 @@ const BusinessCoreInfo = /*@__PURE__*/ proxyCustomElement(class BusinessCoreInfo
         }
         this.errors = {};
         this.coreInfo = {};
+        this.isEditingTaxId = false;
         this.inputHandler = this.inputHandler.bind(this);
     }
     componentDidLoad() {
@@ -30,13 +32,19 @@ const BusinessCoreInfo = /*@__PURE__*/ proxyCustomElement(class BusinessCoreInfo
         this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
     }
     render() {
+        var _a, _b;
         const coreInfoDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { key: '0f01827de5a6ff9f6da4aabac4c219da9bb7f7bc' }, h("fieldset", { key: 'fb47f0c5e7d566fe3af06eb1f38af813ca1a5a98' }, h("legend", { key: '04b3a526d159f010da3960220c6738c23ab59ae9', part: heading2 }, "General Info"), h("div", { key: 'cfa7ae60828f3b7525d6582effe31e11f4940ae1', class: "row gy-3" }, h("div", { key: '09f915e522f42ea60bde326b93c0acbf79914047', class: "col-12" }, h("form-control-text", { key: 'fcfb0a32d62173c0fd60e21410cbf8be1843855f', name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, errorText: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { key: 'be83c79addceacb5621fb480cdc606a5393778ca', class: "col-12" }, h("form-control-text", { key: 'e78ff2fa54cd819b9117d03976d40e5aa49e33b5', name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, errorText: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { key: '1a17daeaac46daa23ea4a2a028d08db238cc11d9', class: "col-12 col-md-8" }, h("form-control-select", { key: 'c8d76e0cdb665a43162d5605bda5361969933964', name: "classification", label: "Business Classification", options: businessClassificationOptions, defaultValue: coreInfoDefaultValue.classification, errorText: this.errors.classification, inputHandler: this.inputHandler })), h("div", { key: '1cfd904e9c039e834e086847b296ee4a6ee3f676', class: "col-12 col-md-4" }, h("form-control-date", { key: 'bdd8b4b01c9bd22b4c0188d7b37ebd6228a8af45', name: "date_of_incorporation", label: "Date of Incorporation", defaultValue: coreInfoDefaultValue.date_of_incorporation, errorText: this.errors.date_of_incorporation, inputHandler: this.inputHandler })), h("div", { key: 'bb1aceaf0a2ea01d4116fa66e7fc086824940619', class: "col-12 col-md-6" }, h("form-control-text", { key: '4fdcb1caae3cba88e8f6f9c14cb8b85c98e8a0f2', name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, errorText: this.errors.industry, inputHandler: this.inputHandler })), h("div", { key: '238c8aae3f95286292b302efd2a490a0b7e9ce56', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '5a8e4040603858ff704da4c3c901d3903d0ed619', name: "tax_id", label: "Tax ID", defaultValue: coreInfoDefaultValue.tax_id, errorText: this.errors.tax_id, inputHandler: this.inputHandler, mask: TAX_ID_MASKS.US })), h("div", { key: 'e3a9a7987837dbb026b3edb6c0659b8c45ddf3bc', class: "col-12" }, h("form-control-text", { key: 'fd826dbe012a25bfcaf456f3f2d3e300de3b81d8', name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, errorText: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { key: '26cd8ff17604388d92f594193cde8a5005a727d1', class: "col-12 col-md-6" }, h("form-control-text", { key: 'cf5c1601d7d956656168d3819767cc912a35ea7c', name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'f94b1fa7cc39f3800404ce2ea2d46af70bf43b08', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'ea73e0093f103c7bc5913ca1dc7625fde1ff09f6', name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
+        return (h(Host, { key: 'abe85b33019341e670263a3fabefe1c73c203a12' }, h("fieldset", { key: '12eb6d4e78e56c8771d95e03fa7d8c4c9ea6478f' }, h("legend", { key: '514cb38045c7d4a4a6746a3846c84013507d0691', part: heading2 }, "General Info"), h("div", { key: '30a509f2dd8ec2938dcc790d8891a917b76b91a0', class: "row gy-3" }, h("div", { key: 'ced24f46905abd380fd190bd56d56eba7ec65289', class: "col-12" }, h("form-control-text", { key: '26e986bef6cad147cd7e5b557e27ad8e61932e54', name: "legal_name", label: "Legal Name", defaultValue: coreInfoDefaultValue.legal_name, errorText: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { key: 'fabae43dc916ee087b73e366b01bc40fc29a4110', class: "col-12" }, h("form-control-text", { key: 'bf7e45fe95c0156c583c693006f4a65f2d1d6b1b', name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, errorText: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { key: '12d52af1fb5dcef7382b8a36f44a048bcff5a752', class: "col-12 col-md-8" }, h("form-control-select", { key: '94ea7c2438e5fbb0b85a9df5915d78791ae026ea', name: "classification", label: "Business Classification", options: businessClassificationOptions, defaultValue: coreInfoDefaultValue.classification, errorText: this.errors.classification, inputHandler: this.inputHandler })), h("div", { key: '90800a655ff4470ea6de9f774dcdccc95862c821', class: "col-12 col-md-4" }, h("form-control-date", { key: '715436c7bf7d34ab2505b1005873ac549f351af1', name: "date_of_incorporation", label: "Date of Incorporation", defaultValue: coreInfoDefaultValue.date_of_incorporation, errorText: this.errors.date_of_incorporation, inputHandler: this.inputHandler })), h("div", { key: 'f4502deec218f3493210ecb6b1ad19fc7cf9f28f', class: "col-12 col-md-6" }, h("form-control-text", { key: '91614c8854a4b2e79fea028c1ad43ef751dacfb1', name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, errorText: this.errors.industry, inputHandler: this.inputHandler })), h("div", { key: '9c7a45b88199e7d00673e6d569f45e2dcf3d242d', class: "col-12 col-md-6" }, (!((_a = this.coreInfo) === null || _a === void 0 ? void 0 : _a.tax_id_last4) || this.isEditingTaxId) ? (h("form-control-number-masked", { name: "tax_id", label: countryLabels[this.country].taxIdLabel, defaultValue: this.isEditingTaxId ? '' : coreInfoDefaultValue.tax_id, errorText: this.errors.tax_id, inputHandler: this.inputHandler, mask: IDENTITY_MASKS[this.country], helpText: countryLabels[this.country].taxIdHelpText })) : (h("div", null, h("label", { class: "form-label", part: label }, countryLabels[this.country].taxIdLabel), h("div", { class: "input-group mb-3" }, h("input", { type: "text", class: "form-control", part: inputDisabled, value: `****${(_b = this.coreInfo) === null || _b === void 0 ? void 0 : _b.tax_id_last4}`, disabled: true }), h("button", { class: "btn btn-secondary", type: "button", part: buttonSecondary, onClick: () => {
+                this.isEditingTaxId = true;
+                this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { tax_id: '' }));
+            } }, "Change"))))), h("div", { key: 'd0eb145c0afde23fd1dcf7837763971b259ff260', class: "col-12" }, h("form-control-text", { key: '7b2d6a1558b6be6adc87ff4109bca6e9238c2ecf', name: "website_url", label: "Website URL", defaultValue: coreInfoDefaultValue.website_url, errorText: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { key: 'eb9637448b9f9a6e4a8b8a08ad9f7f48ff56ec4f', class: "col-12 col-md-6" }, h("form-control-text", { key: '1f2b0ce0c7dd02485635e8f666d59cd7ec792dbc', name: "email", label: "Email Address", defaultValue: coreInfoDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '46fa9ad350b8482296ce0a76db841b78efb9b83b', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '9d4376e2e1d4372470ba8483f8fe1c0992267e38', name: "phone", label: "Phone Number", defaultValue: coreInfoDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
     }
 }, [256, "justifi-business-core-info", {
-        "formController": [16, "form-controller"],
+        "formController": [16],
+        "country": [1],
         "errors": [32],
-        "coreInfo": [32]
+        "coreInfo": [32],
+        "isEditingTaxId": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/module/business-details-core2.js

@@ -64,7 +64,7 @@ const BusinessDetailsCore = /*@__PURE__*/ proxyCustomElement(class BusinessDetai
         return (h(StyledHost, null, h("justifi-details", { "error-message": this.errorMessage }, h("div", { slot: 'detail-sections' }, h("core-info-details", { business: this.business }), h("legal-address-details", { legalAddress: this.business.legal_address }), h("representative-details", { representative: this.business.representative }), h("owner-details", { owners: this.business.owners }), h("additional-questions-details", { additionalQuestions: this.business.additional_questions })))));
     }
 }, [256, "business-details-core", {
-        "getBusiness": [16, "get-business"],
+        "getBusiness": [16],
         "business": [32],
         "renderState": [32],
         "errorMessage": [32]

package/dist/module/business-identity-schema.js

@@ -1,29 +1,56 @@
 import { c as create$3, a as create$6 } from './form.js';
-import { a as addressSchema } from './business-address-schema.js';
-import { v as ssnValidation, x as dobValidation, m as phoneValidation, n as emailValidation, y as identityTitleValidation, i as identityNameValidation } from './schema-validations.js';
+import { a as addressSchemaUSA, b as addressSchemaCAN } from './business-address-schema.js';
+import { x as ssnValidation, y as dobValidation, n as phoneValidation, q as emailValidation, z as identityTitleValidation, i as identityNameValidation, A as makeIdentityNumberValidation } from './schema-validations.js';
+import { a as CountryCode } from './Business.js';
 
-const identitySchema = (role, allowOptionalFields) => {
-    const schema = create$3({
-        name: identityNameValidation.required(`Enter ${role} name`),
-        title: identityTitleValidation.required(`Enter ${role} title`),
-        email: emailValidation.required(`Enter ${role} email`),
-        phone: phoneValidation.required('Enter phone number'),
-        dob_full: dobValidation(role).required('Enter date of birth'),
-        ssn_last4: create$6().nullable(),
-        identification_number: ssnValidation,
-        address: addressSchema(allowOptionalFields),
-    });
-    const easySchema = create$3({
-        name: identityNameValidation.required(`Enter ${role} name`),
-        title: identityTitleValidation.nullable(),
-        email: emailValidation.nullable(),
-        phone: phoneValidation.nullable(),
-        dob_full: dobValidation(role).nullable(),
-        ssn_last4: create$6().nullable(),
-        identification_number: ssnValidation.nullable(),
-        address: addressSchema(allowOptionalFields),
-    });
-    return allowOptionalFields ? easySchema : schema;
+// Internal USA schemas
+const schemaUSA = (role) => create$3({
+    name: identityNameValidation.required(`Enter ${role} name`),
+    title: identityTitleValidation.nullable(),
+    email: emailValidation.nullable(),
+    phone: phoneValidation.nullable(),
+    dob_full: dobValidation(role).nullable(),
+    ssn_last4: create$6().nullable(),
+    identification_number: ssnValidation.nullable(),
+    address: addressSchemaUSA(true),
+});
+const strictSchemaUSA = (role) => create$3({
+    name: identityNameValidation.required(`Enter ${role} name`),
+    title: identityTitleValidation.required(`Enter ${role} title`),
+    email: emailValidation.required(`Enter ${role} email`),
+    phone: phoneValidation.required('Enter phone number'),
+    dob_full: dobValidation(role).required('Enter date of birth'),
+    ssn_last4: create$6().nullable(),
+    // ssn required unless last4 provided (handled inside ssnValidation)
+    identification_number: ssnValidation,
+    address: addressSchemaUSA(false),
+});
+// Internal CAN schemas
+const schemaCAN = (role) => create$3({
+    name: identityNameValidation.required(`Enter ${role} name`),
+    title: identityTitleValidation.nullable(),
+    email: emailValidation.nullable(),
+    phone: phoneValidation.nullable(),
+    dob_full: dobValidation(role).nullable(),
+    identification_number: makeIdentityNumberValidation(CountryCode.CAN).nullable(),
+    address: addressSchemaCAN(true),
+});
+const strictSchemaCAN = (role) => create$3({
+    name: identityNameValidation.required(`Enter ${role} name`),
+    title: identityTitleValidation.required(`Enter ${role} title`),
+    email: emailValidation.required(`Enter ${role} email`),
+    phone: phoneValidation.required('Enter phone number'),
+    dob_full: dobValidation(role).required('Enter date of birth'),
+    identification_number: makeIdentityNumberValidation(CountryCode.CAN)
+        .required('Enter identification number'),
+    address: addressSchemaCAN(false),
+});
+const identitySchemaUSA = (role, allowOptionalFields) => allowOptionalFields ? schemaUSA(role) : strictSchemaUSA(role);
+const identitySchemaCAN = (role, allowOptionalFields) => allowOptionalFields ? schemaCAN(role) : strictSchemaCAN(role);
+// Country-keyed mapping
+const identitySchemaByCountry = {
+    [CountryCode.USA]: identitySchemaUSA,
+    [CountryCode.CAN]: identitySchemaCAN,
 };
 
-export { identitySchema as i };
+export { identitySchemaUSA as a, identitySchemaCAN as b, identitySchemaByCountry as i };

package/dist/module/business-owners-form-step-core.js

@@ -6,12 +6,13 @@ import './event-types.js';
 import './justifi-radio-list-item2.js';
 import { P as PaymentProvisioningLoading } from './payment-provisioning-loading.js';
 import { B as BusinessFormStep, a as BusinessFormClickActions } from './event-types2.js';
-import { d as defineCustomElement$a } from './custom-popper2.js';
-import { d as defineCustomElement$9 } from './form-control-date2.js';
-import { d as defineCustomElement$8 } from './form-control-number-masked2.js';
-import { d as defineCustomElement$7 } from './form-control-select2.js';
-import { d as defineCustomElement$6 } from './form-control-text2.js';
-import { d as defineCustomElement$5 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$b } from './custom-popper2.js';
+import { d as defineCustomElement$a } from './form-control-date2.js';
+import { d as defineCustomElement$9 } from './form-control-number-masked2.js';
+import { d as defineCustomElement$8 } from './form-control-select2.js';
+import { d as defineCustomElement$7 } from './form-control-text2.js';
+import { d as defineCustomElement$6 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$5 } from './form-address-fields.js';
 import { d as defineCustomElement$4 } from './identity-address-form.js';
 import { d as defineCustomElement$3 } from './owner-form.js';
 import { d as defineCustomElement$2 } from './owner-form-core2.js';
@@ -136,7 +137,7 @@ const BusinessOwnersFormStepCore = /*@__PURE__*/ proxyCustomElement(class Busine
             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 watchers() { return {
@@ -145,9 +146,10 @@ const BusinessOwnersFormStepCore = /*@__PURE__*/ proxyCustomElement(class Busine
 }, [256, "justifi-business-owners-form-step-core", {
         "authToken": [1, "auth-token"],
         "businessId": [1, "business-id"],
-        "getBusiness": [16, "get-business"],
-        "patchBusiness": [16, "patch-business"],
+        "getBusiness": [16],
+        "patchBusiness": [16],
         "allowOptionalFields": [4, "allow-optional-fields"],
+        "country": [1],
         "ownersPayload": [32],
         "refs": [32],
         "newFormOpen": [32],
@@ -160,7 +162,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-owners-form-step-core", "custom-popper", "form-control-date", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-identity-address-form", "justifi-owner-form", "owner-form-core", "owner-form-inputs"];
+    const components = ["justifi-business-owners-form-step-core", "custom-popper", "form-control-date", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-form-address-fields", "justifi-identity-address-form", "justifi-owner-form", "owner-form-core", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-business-owners-form-step-core":
             if (!customElements.get(tagName)) {
@@ -169,30 +171,35 @@ function defineCustomElement() {
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "form-control-number-masked":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "form-control-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "justifi-form-address-fields":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

package/dist/module/business-owners-form-step.js

@@ -2,13 +2,14 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import { m as makeGetBusiness, a as makePatchBusiness } from './payment-provisioning-actions.js';
 import { B as BusinessService } from './business.service.js';
-import { d as defineCustomElement$b } from './custom-popper2.js';
-import { d as defineCustomElement$a } from './form-control-date2.js';
-import { d as defineCustomElement$9 } from './form-control-number-masked2.js';
-import { d as defineCustomElement$8 } from './form-control-select2.js';
-import { d as defineCustomElement$7 } from './form-control-text2.js';
-import { d as defineCustomElement$6 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$5 } from './business-owners-form-step-core.js';
+import { d as defineCustomElement$c } from './custom-popper2.js';
+import { d as defineCustomElement$b } from './form-control-date2.js';
+import { d as defineCustomElement$a } from './form-control-number-masked2.js';
+import { d as defineCustomElement$9 } from './form-control-select2.js';
+import { d as defineCustomElement$8 } from './form-control-text2.js';
+import { d as defineCustomElement$7 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$6 } from './business-owners-form-step-core.js';
+import { d as defineCustomElement$5 } from './form-address-fields.js';
 import { d as defineCustomElement$4 } from './identity-address-form.js';
 import { d as defineCustomElement$3 } from './owner-form.js';
 import { d as defineCustomElement$2 } from './owner-form-core2.js';
@@ -53,7 +54,7 @@ const BusinessOwnersFormStep = /*@__PURE__*/ proxyCustomElement(class BusinessOw
         }
     }
     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 watchers() { return {
         "authToken": ["propChanged"],
@@ -63,6 +64,7 @@ const BusinessOwnersFormStep = /*@__PURE__*/ proxyCustomElement(class BusinessOw
         "authToken": [1, "auth-token"],
         "businessId": [1, "business-id"],
         "allowOptionalFields": [4, "allow-optional-fields"],
+        "country": [1],
         "getBusiness": [32],
         "patchBusiness": [32],
         "validateAndSubmit": [64]
@@ -74,7 +76,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-owners-form-step", "custom-popper", "form-control-date", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-business-owners-form-step-core", "justifi-identity-address-form", "justifi-owner-form", "owner-form-core", "owner-form-inputs"];
+    const components = ["justifi-business-owners-form-step", "custom-popper", "form-control-date", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-business-owners-form-step-core", "justifi-form-address-fields", "justifi-identity-address-form", "justifi-owner-form", "owner-form-core", "owner-form-inputs"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-business-owners-form-step":
             if (!customElements.get(tagName)) {
@@ -83,35 +85,40 @@ function defineCustomElement() {
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "form-control-number-masked":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "form-control-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "form-control-tooltip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "justifi-business-owners-form-step-core":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "justifi-form-address-fields":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

package/dist/module/business-representative-form-inputs.js

@@ -1,13 +1,15 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { u as updateFormValues, a as updateAddressFormValues, b as updateDateOfBirthFormValues } from './input-handlers.js';
-import { P as PHONE_MASKS, S as SSN_MASK } from './form-input-masks.js';
-import { h as heading2 } from './parts.js';
-import { d as defineCustomElement$7 } from './custom-popper2.js';
-import { d as defineCustomElement$6 } from './form-control-date2.js';
-import { d as defineCustomElement$5 } from './form-control-number-masked2.js';
-import { d as defineCustomElement$4 } from './form-control-select2.js';
-import { d as defineCustomElement$3 } from './form-control-text2.js';
-import { d as defineCustomElement$2 } from './form-control-tooltip2.js';
+import { P as PHONE_MASKS, I as IDENTITY_MASKS } from './form-input-masks.js';
+import { h as heading2, l as label, c as inputDisabled, X as buttonSecondary } from './parts.js';
+import { c as countryLabels } from './country-config.js';
+import { d as defineCustomElement$8 } from './custom-popper2.js';
+import { d as defineCustomElement$7 } from './form-control-date2.js';
+import { d as defineCustomElement$6 } from './form-control-number-masked2.js';
+import { d as defineCustomElement$5 } from './form-control-select2.js';
+import { d as defineCustomElement$4 } from './form-control-text2.js';
+import { d as defineCustomElement$3 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$2 } from './form-address-fields.js';
 import { d as defineCustomElement$1 } from './identity-address-form.js';
 
 const RepresentativeFormInputs = /*@__PURE__*/ proxyCustomElement(class RepresentativeFormInputs extends HTMLElement {
@@ -16,6 +18,7 @@ const RepresentativeFormInputs = /*@__PURE__*/ proxyCustomElement(class Represen
         if (registerHost !== false) {
             this.__registerHost();
         }
+        this.isEditingIdentification = false;
         this.inputHandler = (name, value) => {
             updateFormValues(this.formController, { [name]: value });
         };
@@ -24,19 +27,28 @@ const RepresentativeFormInputs = /*@__PURE__*/ proxyCustomElement(class Represen
         };
     }
     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 }))))));
     }
 }, [256, "justifi-business-representative-form-inputs", {
         "representativeDefaultValue": [8, "representative-default-value"],
         "errors": [8],
-        "formController": [16, "form-controller"]
+        "formController": [16],
+        "country": [1],
+        "isEditingIdentification": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-representative-form-inputs", "custom-popper", "form-control-date", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-identity-address-form"];
+    const components = ["justifi-business-representative-form-inputs", "custom-popper", "form-control-date", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-form-address-fields", "justifi-identity-address-form"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-business-representative-form-inputs":
             if (!customElements.get(tagName)) {
@@ -45,30 +57,35 @@ function defineCustomElement() {
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "form-control-number-masked":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "form-control-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "justifi-form-address-fields":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/module/business-representative-form-step-core.js

@@ -1,16 +1,17 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { R as Representative } from './Business.js';
 import { F as FormController } from './form.js';
-import { i as identitySchema } from './business-identity-schema.js';
+import { i as identitySchemaByCountry } from './business-identity-schema.js';
 import { P as PaymentProvisioningLoading } from './payment-provisioning-loading.js';
 import { B as BusinessFormStep } from './event-types2.js';
-import { d as defineCustomElement$8 } from './custom-popper2.js';
-import { d as defineCustomElement$7 } from './form-control-date2.js';
-import { d as defineCustomElement$6 } from './form-control-number-masked2.js';
-import { d as defineCustomElement$5 } from './form-control-select2.js';
-import { d as defineCustomElement$4 } from './form-control-text2.js';
-import { d as defineCustomElement$3 } from './form-control-tooltip2.js';
-import { d as defineCustomElement$2 } from './business-representative-form-inputs.js';
+import { d as defineCustomElement$9 } from './custom-popper2.js';
+import { d as defineCustomElement$8 } from './form-control-date2.js';
+import { d as defineCustomElement$7 } from './form-control-number-masked2.js';
+import { d as defineCustomElement$6 } from './form-control-select2.js';
+import { d as defineCustomElement$5 } from './form-control-text2.js';
+import { d as defineCustomElement$4 } from './form-control-tooltip2.js';
+import { d as defineCustomElement$3 } from './business-representative-form-inputs.js';
+import { d as defineCustomElement$2 } from './form-address-fields.js';
 import { d as defineCustomElement$1 } from './identity-address-form.js';
 
 const BusinessRepresentativeFormStepCore = /*@__PURE__*/ proxyCustomElement(class BusinessRepresentativeFormStepCore extends HTMLElement {
@@ -26,11 +27,14 @@ const BusinessRepresentativeFormStepCore = /*@__PURE__*/ proxyCustomElement(clas
         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 }) => {
@@ -78,8 +82,9 @@ const BusinessRepresentativeFormStepCore = /*@__PURE__*/ proxyCustomElement(clas
         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 => {
@@ -90,12 +95,13 @@ const BusinessRepresentativeFormStepCore = /*@__PURE__*/ proxyCustomElement(clas
         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 }));
     }
 }, [256, "justifi-business-representative-form-step-core", {
-        "getBusiness": [16, "get-business"],
-        "patchBusiness": [16, "patch-business"],
+        "getBusiness": [16],
+        "patchBusiness": [16],
         "allowOptionalFields": [4, "allow-optional-fields"],
+        "country": [1],
         "formController": [32],
         "errors": [32],
         "representative": [32],
@@ -106,7 +112,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-business-representative-form-step-core", "custom-popper", "form-control-date", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-business-representative-form-inputs", "justifi-identity-address-form"];
+    const components = ["justifi-business-representative-form-step-core", "custom-popper", "form-control-date", "form-control-number-masked", "form-control-select", "form-control-text", "form-control-tooltip", "justifi-business-representative-form-inputs", "justifi-form-address-fields", "justifi-identity-address-form"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-business-representative-form-step-core":
             if (!customElements.get(tagName)) {
@@ -115,35 +121,40 @@ function defineCustomElement() {
             break;
         case "custom-popper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "form-control-number-masked":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "form-control-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "form-control-tooltip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "justifi-business-representative-form-inputs":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "justifi-form-address-fields":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }