@justifi/webcomponents 6.1.1 → 6.2.0-rc.2

package/dist/collection/components/business-forms/payment-provisioning/bank-account/bank-account-read-only-value.js

@@ -0,0 +1,50 @@
+import { h } from "@stencil/core";
+import { text } from "../../../../styles/parts";
+export class BankAccountReadOnlyValue {
+    render() {
+        return (h("div", { key: '0d44d4aa265a5fd36ca30f1db072eb834f8bdf1b' }, h("label", { key: '892e6dbdbff5d484df4dfb522f3db8968f46d7d4', class: "form-label", part: text }, this.label), h("div", { key: 'cd617e2302834ad67ebccd64e24d535b2cc19da8', part: text }, this.value || '')));
+    }
+    static get is() { return "bank-account-read-only-value"; }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+}

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
-import { businessBankAccountSchema } from "../../schemas/business-bank-account-schema";
+import { bankAccountSchemaByCountry } from "../../schemas/business-bank-account-schema";
+import { CountryCode } from "../../../../utils/country-codes";
 import { FormController } from "../../../../ui-components/form/form";
 import { BusinessFormStep } from "../../utils";
 import { heading2 } from "../../../../styles/parts";
@@ -12,8 +13,12 @@ export class BusinessBankAccountFormStepCore {
         this.existingDocuments = [];
         this.documentData = new EntityDocumentStorage();
         this.isLoading = false;
+        this.getSchema = () => {
+            const schema = bankAccountSchemaByCountry[this.country];
+            return schema(this.allowOptionalFields, this.existingDocuments);
+        };
         this.initializeFormController = () => {
-            this.formController = new FormController(businessBankAccountSchema(this.existingDocuments, this.allowOptionalFields));
+            this.formController = new FormController(this.getSchema());
             this.formController.setInitialValues(Object.assign({}, this.bankAccount));
             this.formController.errors.subscribe(errors => {
                 this.errors = Object.assign({}, errors);
@@ -130,7 +135,7 @@ export class BusinessBankAccountFormStepCore {
     }
     componentWillLoad() {
         this.getBusiness && this.getData();
-        this.formController = new FormController(businessBankAccountSchema(this.existingDocuments, this.allowOptionalFields));
+        this.formController = new FormController(this.getSchema());
     }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => {
@@ -138,7 +143,8 @@ export class BusinessBankAccountFormStepCore {
         });
     }
     get postPayload() {
-        let formValues = new BankAccount(this.formController.values.getValue()).payload;
+        const values = this.formController.values.getValue();
+        const formValues = new BankAccount(values).payload;
         return formValues;
     }
     get existingBankAccount() {
@@ -220,7 +226,7 @@ export class BusinessBankAccountFormStepCore {
         if (this.isLoading) {
             return h(PaymentProvisioningLoading, null);
         }
-        return (h("form", null, h("fieldset", { class: "mb-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Bank Account Info"), h("form-control-tooltip", { helpText: "This direct deposit account is the designated bank account where incoming funds will be deposited. The name of this account must match the registered business name exactly. We are not able to accept personal accounts unless your business is a registered sole proprietorship." })), h("hr", { class: "mt-2" }), h("bank-account-form-inputs", { defaultValue: bankAccountDefaultValue, errors: this.errors, inputHandler: this.inputHandler, formDisabled: this.existingBankAccount })), h("fieldset", { class: "mt-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Document Uploads"), h("form-control-tooltip", { helpText: "One document (voided check or bank statement) is required for underwriting purposes. It needs to visibly show the name tied to the account and the account number. Various file formats such as PDF, DOC, DOCX, JPEG are accepted. Multiple files can be uploaded for each document category." })), h("hr", { class: "mt-2" }), h("business-documents-on-file", { documents: this.existingDocuments, isLoading: this.isLoading }), h("bank-account-document-form-inputs", { inputHandler: this.inputHandler, errors: this.errors, storeFiles: this.storeFiles }))));
+        return (h("form", null, h("fieldset", { class: "mb-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Bank Account Info"), h("form-control-tooltip", { helpText: "This direct deposit account is the designated bank account where incoming funds will be deposited. The name of this account must match the registered business name exactly. We are not able to accept personal accounts unless your business is a registered sole proprietorship." })), h("hr", { class: "mt-2" }), this.country === CountryCode.CAN ? (h("bank-account-form-inputs-canada", { defaultValue: bankAccountDefaultValue, errors: this.errors, inputHandler: this.inputHandler, formDisabled: this.existingBankAccount })) : (h("bank-account-form-inputs", { defaultValue: bankAccountDefaultValue, errors: this.errors, inputHandler: this.inputHandler, formDisabled: this.existingBankAccount }))), h("fieldset", { class: "mt-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Document Uploads"), h("form-control-tooltip", { helpText: "One document (voided check or bank statement) is required for underwriting purposes. It needs to visibly show the name tied to the account and the account number. Various file formats such as PDF, DOC, DOCX, JPEG are accepted. Multiple files can be uploaded for each document category." })), h("hr", { class: "mt-2" }), h("business-documents-on-file", { documents: this.existingDocuments, isLoading: this.isLoading }), h("bank-account-document-form-inputs", { inputHandler: this.inputHandler, errors: this.errors, storeFiles: this.storeFiles }))));
     }
     static get is() { return "justifi-business-bank-account-form-step-core"; }
     static get properties() {
@@ -328,6 +334,31 @@ export class BusinessBankAccountFormStepCore {
                 "setter": 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/bank-account/business-bank-account-form-step.js

@@ -37,7 +37,7 @@ export class BusinessBankAccountFormStep {
         }
     }
     render() {
-        return (h("justifi-business-bank-account-form-step-core", { key: 'adb496ad14cd3334d30e571d873150ed8335f833', businessId: this.businessId, getBusiness: this.getBusiness, postBankAccount: this.postBankAccount, postDocumentRecord: this.postDocumentRecord, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-business-bank-account-form-step-core", { key: 'f4e4c31d04884510d5b432b7cced5eea2b618bcd', businessId: this.businessId, getBusiness: this.getBusiness, postBankAccount: this.postBankAccount, postDocumentRecord: this.postDocumentRecord, allowOptionalFields: this.allowOptionalFields, country: this.country, ref: el => this.coreComponent = el }));
     }
     static get is() { return "justifi-business-bank-account-form-step"; }
     static get properties() {
@@ -98,6 +98,31 @@ export class BusinessBankAccountFormStep {
                 "setter": 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-core-info/business-core-info-form-step-core.js

@@ -1,18 +1,22 @@
 import { h } from "@stencil/core";
-import { businessCoreInfoSchema } from "../../schemas/business-core-info-schema";
+import { businessCoreInfoSchemaUSA, businessCoreInfoSchemaCAN } from "../../schemas/business-core-info-schema";
 import { FormController } from "../../../../ui-components/form/form";
 import { CoreBusinessInfo } from "../../../../api/Business";
 import { BusinessFormStep, businessClassificationOptions } from "../../utils";
 import { PHONE_MASKS } from "../../../../utils/form-input-masks";
-import { numberOnlyHandler } from "../../../../ui-components/form/utils";
-import { heading2 } from "../../../../styles/parts";
+import { heading2, label, inputDisabled, buttonSecondary } from "../../../../styles/parts";
 import { PaymentProvisioningLoading } from "../payment-provisioning-loading";
+import { CountryCode } from "../../../../utils/country-codes";
+import { countryLabels } from "../../utils/country-config";
 export class BusinessCoreInfoFormStepCore {
     constructor() {
         this.errors = {};
         this.coreInfo = {};
         this.isLoading = false;
+        this.isEditingTaxId = false;
         this.getData = () => {
+            if (!this.getBusiness)
+                return;
             this.formLoading.emit(true);
             this.isLoading = true;
             this.getBusiness({
@@ -41,6 +45,8 @@ export class BusinessCoreInfoFormStepCore {
                 onSuccess: (response) => {
                     submittedData = response;
                     onSuccess();
+                    // after successful patch, revert back to read-only for tax id
+                    this.isEditingTaxId = false;
                 },
                 onError: ({ error, code, severity }) => {
                     submittedData = error;
@@ -69,8 +75,11 @@ export class BusinessCoreInfoFormStepCore {
         return formValues;
     }
     componentWillLoad() {
-        this.getBusiness && this.getData();
-        this.formController = new FormController(businessCoreInfoSchema(this.allowOptionalFields));
+        const schema = (this.country === CountryCode.CAN)
+            ? businessCoreInfoSchemaCAN(this.allowOptionalFields)
+            : businessCoreInfoSchemaUSA(this.allowOptionalFields);
+        this.formController = new FormController(schema);
+        this.getData();
     }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => {
@@ -78,11 +87,16 @@ export class BusinessCoreInfoFormStepCore {
         });
     }
     render() {
+        var _a, _b;
         const coreInfoDefaultValue = this.formController.getInitialValues();
         if (this.isLoading) {
             return h(PaymentProvisioningLoading, null);
         }
-        return (h("form", null, h("fieldset", null, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Business Information")), h("hr", { class: "mt-2" }), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: "legal_name", label: "Business Name", defaultValue: coreInfoDefaultValue.legal_name, errorText: this.errors.legal_name, inputHandler: this.inputHandler, helpText: "Enter this exactly as it appears on your tax records (don't use acronyms or abbreviations unless you registered that way)." })), h("div", { class: "col-12" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, errorText: this.errors.doing_business_as, inputHandler: this.inputHandler, helpText: "Enter this exactly as it appears on your tax records (leave blank if you don't have a registered DBA/trade name)" })), h("div", { class: "col-12 col-md-8" }, h("form-control-select", { name: "classification", label: "Business Classification", options: businessClassificationOptions, defaultValue: coreInfoDefaultValue.classification, errorText: this.errors.classification, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-date", { name: "date_of_incorporation", label: "Date of Incorporation", defaultValue: coreInfoDefaultValue.date_of_incorporation, errorText: this.errors.date_of_incorporation, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, errorText: this.errors.industry, inputHandler: this.inputHandler, helpText: "Describe what you sell" })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "tax_id", label: "Tax ID (EIN or SSN)", defaultValue: coreInfoDefaultValue.tax_id, errorText: this.errors.tax_id, inputHandler: this.inputHandler, keyDownHandler: numberOnlyHandler, maxLength: 9, helpText: "Employer Identification Numbers (EINs) are nine digits. The federal tax identification number/EIN issued to you by the IRS. It can be found on your tax returns. Enter value without dashes." })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Business Website URL", defaultValue: coreInfoDefaultValue.website_url, errorText: this.errors.website_url, inputHandler: this.inputHandler, helpText: "Don't have a live website? You can use your social media business page, app store link, or staging site URL." })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Business Email Address", defaultValue: coreInfoDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Business Phone Number", defaultValue: coreInfoDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
+        return (h("form", null, h("fieldset", null, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Business Information")), h("hr", { class: "mt-2" }), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: "legal_name", label: "Business Name", defaultValue: coreInfoDefaultValue.legal_name, errorText: this.errors.legal_name, inputHandler: this.inputHandler, helpText: "Enter this exactly as it appears on your tax records (don't use acronyms or abbreviations unless you registered that way)." })), h("div", { class: "col-12" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: coreInfoDefaultValue.doing_business_as, errorText: this.errors.doing_business_as, inputHandler: this.inputHandler, helpText: "Enter this exactly as it appears on your tax records (leave blank if you don't have a registered DBA/trade name)" })), h("div", { class: "col-12 col-md-8" }, h("form-control-select", { name: "classification", label: "Business Classification", options: businessClassificationOptions, defaultValue: coreInfoDefaultValue.classification, errorText: this.errors.classification, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-4" }, h("form-control-date", { name: "date_of_incorporation", label: "Date of Incorporation", defaultValue: coreInfoDefaultValue.date_of_incorporation, errorText: this.errors.date_of_incorporation, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: coreInfoDefaultValue.industry, errorText: this.errors.industry, inputHandler: this.inputHandler, helpText: "Describe what you sell" })), h("div", { 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: '000000000', 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;
+                // Clear last4-equivalent and current value if any future conditional validation depends on it
+                this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { tax_id: '', tax_id_last4: null }));
+            } }, "Change"))))), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Business Website URL", defaultValue: coreInfoDefaultValue.website_url, errorText: this.errors.website_url, inputHandler: this.inputHandler, helpText: "Don't have a live website? You can use your social media business page, app store link, or staging site URL." })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Business Email Address", defaultValue: coreInfoDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Business Phone Number", defaultValue: coreInfoDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US }))))));
     }
     static get is() { return "justifi-business-core-info-form-step-core"; }
     static get properties() {
@@ -168,6 +182,31 @@ export class BusinessCoreInfoFormStepCore {
                 "setter": 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"
             }
         };
     }
@@ -176,7 +215,8 @@ export class BusinessCoreInfoFormStepCore {
             "formController": {},
             "errors": {},
             "coreInfo": {},
-            "isLoading": {}
+            "isLoading": {},
+            "isEditingTaxId": {}
         };
     }
     static get events() {

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

@@ -34,7 +34,7 @@ export class BusinessCoreInfoFormStep {
         }
     }
     render() {
-        return (h("justifi-business-core-info-form-step-core", { key: '1d2bd68e87d5f312c54f5a4bda8863b26fdeec5d', businessId: this.businessId, getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
+        return (h("justifi-business-core-info-form-step-core", { key: '1aeaeae1d432883c1e242c066881cabc37097032', 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-core-info-form-step"; }
     static get properties() {
@@ -95,6 +95,31 @@ export class BusinessCoreInfoFormStep {
                 "setter": 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-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"; }
@@ -220,6 +220,31 @@ export class BusinessOwnersFormStepCore {
                 "setter": 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,7 +34,7 @@ export class BusinessOwnersFormStep {
         }
     }
     render() {
-        return (h(Host, { key: '3420b6e74da344665583a49146b5b7fd1be40155' }, h("justifi-business-owners-form-step-core", { key: '3e092450028815a0b134af4294edbb7589864409', 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() {
@@ -95,6 +95,31 @@ export class BusinessOwnersFormStep {
                 "setter": 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,8 +14,15 @@ export class RepresentativeFormInputs {
         };
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        return (h("form", { key: 'e4b7a532e18a921a5a28aab31f679fbbad164198' }, h("fieldset", { key: 'd7056e5ee25625adb563e2687f581157653c8a9d' }, h("div", { key: '456aab0ef1399a7c1d272059c881c6c6f3d0e87c', class: "d-flex align-items-center gap-2" }, h("legend", { key: '430b3731bbd97ff1589bd81bd6fdaa4082161180', class: "mb-0", part: heading2 }, "Representative"), h("form-control-tooltip", { key: '47676ededb80e0f766cb786265d8fb307c60d125', 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: '514197b5bd4868ec29e75dc74367deb187b32063', class: "mt-2" }), h("div", { key: 'f2986d55d0bfbf0e6059f0b2a766d2dc603acdc5', class: "row gy-3" }, h("div", { key: 'e4a3749c5e972f505527b8fc172f9a4214806345', class: "col-12 col-md-8" }, h("form-control-text", { key: 'd54c8d17f0360277fe04dd91a528e303182495c7', 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: '4fa0b1a192fb39a982c957d202ea2ac1e40dedd8', class: "col-12 col-md-4" }, h("form-control-text", { key: '8c3bca4234ea0e7ae3c79d810ffb469637898eb6', 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: '7e14a61364883172f2938bd8b1e53883ddd369fe', class: "col-12 col-md-6" }, h("form-control-text", { key: '8d9c81d374998dbaea5322906fddb5eeadea1546', 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: 'c3f369b226a08497926b26d0732b7dc9d6413559', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '734625aeac8384f2b8676c4d350368675cff3a6f', 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: '23d509b724f2617eb0a4f85c74238b09a052a6cb', class: "col-12 col-md-4" }, h("form-control-date", { key: '0f838cc474beab9822a84856733a86ecf43f0ec3', 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: 'f6d08c53dad2e9a550adf893ac59166015ffb6e4', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: 'dd610955fb7c62fd0aab9af925af34cdc47ab3e9', 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: 'd4e2a212a87ca9be4be8e21f3e47008b2201871c', class: "col-12" }, h("justifi-identity-address-form", { key: 'bb2d0d01e07be4d37acfd448796c8a33460111ed', 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() {
@@ -78,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,7 +78,7 @@ 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() {
@@ -141,6 +145,31 @@ export class BusinessRepresentativeFormStepCore {
                 "setter": 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,7 +34,7 @@ export class BusinessRepresentativeFormStep {
         }
     }
     render() {
-        return (h("justifi-business-representative-form-step-core", { key: '582c77f4b763573a1d29726285a9b871afe96d89', 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() {
@@ -95,6 +95,31 @@ export class BusinessRepresentativeFormStep {
                 "setter": 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"
             }
         };
     }