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

package/dist/collection/components/business-details/legal-address-details/legal-address-details.js

@@ -13,7 +13,6 @@ export class LegalAddressDetails {
         return {
             "legalAddress": {
                 "type": "unknown",
-                "attribute": "legal-address",
                 "mutable": false,
                 "complexType": {
                     "original": "IAddress",

package/dist/collection/components/business-details/owner-details/owner-details.js

@@ -19,7 +19,6 @@ export class OwnerDetails {
         return {
             "owners": {
                 "type": "unknown",
-                "attribute": "owners",
                 "mutable": false,
                 "complexType": {
                     "original": "Identity[]",

package/dist/collection/components/business-details/representative-details/representative-details.js

@@ -13,7 +13,6 @@ export class JustifiRepresentativeDetails {
         return {
             "representative": {
                 "type": "unknown",
-                "attribute": "representative",
                 "mutable": false,
                 "complexType": {
                     "original": "Identity",

package/dist/collection/components/business-forms/business-form/additional-questions/additional-questions.js

@@ -25,7 +25,6 @@ export class AdditionalQuestions {
         return {
             "formController": {
                 "type": "any",
-                "attribute": "form-controller",
                 "mutable": false,
                 "complexType": {
                     "original": "FormController",
@@ -45,7 +44,8 @@ export class AdditionalQuestions {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "form-controller"
             }
         };
     }

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

@@ -1,8 +1,9 @@
 import { Host, h } from "@stencil/core";
 import { businessClassificationOptions } from "../../utils/business-form-options";
-import { PHONE_MASKS, TAX_ID_MASKS } from "../../../../utils/form-input-masks";
+import { IDENTITY_MASKS, PHONE_MASKS } from "../../../../utils/form-input-masks";
 import { CoreBusinessInfo } from "../../../../api/Business";
-import { heading2 } from "../../../../styles/parts";
+import { heading2, label, inputDisabled, buttonSecondary } from "../../../../styles/parts";
+import { countryLabels } from "../../utils/country-config";
 /**
  *
  * The difference between this component and business-core-info-details
@@ -14,6 +15,7 @@ export class BusinessCoreInfo {
     constructor() {
         this.errors = {};
         this.coreInfo = {};
+        this.isEditingTaxId = false;
         this.inputHandler = this.inputHandler.bind(this);
     }
     componentDidLoad() {
@@ -26,15 +28,18 @@ export 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 }))))));
     }
     static get is() { return "justifi-business-core-info"; }
     static get properties() {
         return {
             "formController": {
                 "type": "unknown",
-                "attribute": "form-controller",
                 "mutable": false,
                 "complexType": {
                     "original": "FormController",
@@ -55,13 +60,39 @@ export class BusinessCoreInfo {
                 },
                 "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 {
             "errors": {},
-            "coreInfo": {}
+            "coreInfo": {},
+            "isEditingTaxId": {}
         };
     }
 }

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

@@ -5,6 +5,7 @@ import { ComponentErrorCodes, ComponentErrorSeverity } from "../../../api";
 import { Business, BusinessFormServerErrors } from "../../../api/Business";
 import JustifiAnalytics from "../../../api/Analytics";
 import { Button, Header1, StyledHost } from "../../../ui-components";
+import { CountryCode } from "../../../utils/country-codes";
 import { checkPkgVersion } from "../../../utils/check-pkg-version";
 import { BusinessFormLoading } from "./business-form-loading";
 import { BusinessFormClickActions } from "../utils";
@@ -14,11 +15,13 @@ export class BusinessForm {
     constructor() {
         this.isLoading = false;
         this.isSaving = false;
+        this.country = CountryCode.USA;
         this.hideErrors = false;
         this.formTitle = 'Business Information';
         this.removeTitle = false;
         this.instantiateBusiness = (data) => {
             const business = new Business(data);
+            this.country = business.country_of_establishment;
             this.formController.setInitialValues(Object.assign({}, business));
         };
         this.sendData = async () => {
@@ -109,7 +112,7 @@ export class BusinessForm {
         if (this.isLoading) {
             return h(StyledHost, null, h(BusinessFormLoading, null));
         }
-        return (h(StyledHost, null, h("form", { onSubmit: this.validateAndSubmit }, h("div", { class: "row gap-3" }, h(Header1, { text: this.title }), h("form-alert", { text: this.errorMessage, hideAlert: this.hideErrors }), h("div", { class: "col-12 mb-4" }, h("justifi-business-core-info", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-legal-address-form", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-additional-questions", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-representative", { formController: this.formController })), h("div", { class: "col-12 d-flex flex-row-reverse" }, h(Button, { type: "submit", disabled: this.disabledState, variant: 'primary', onClick: () => this.clickEvent.emit({ name: BusinessFormClickActions.submit }), isLoading: this.isSaving }, "Submit"))))));
+        return (h(StyledHost, null, h("form", { onSubmit: this.validateAndSubmit }, h("div", { class: "row gap-3" }, h(Header1, { text: this.title }), h("form-alert", { text: this.errorMessage, hideAlert: this.hideErrors }), h("div", { class: "col-12 mb-4" }, h("justifi-business-core-info", { formController: this.formController, country: this.country })), h("div", { class: "col-12 mb-4" }, h("justifi-legal-address-form", { formController: this.formController, country: this.country })), h("div", { class: "col-12 mb-4" }, h("justifi-additional-questions", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-representative", { formController: this.formController, country: this.country })), h("div", { class: "col-12 d-flex flex-row-reverse" }, h(Button, { type: "submit", disabled: this.disabledState, variant: 'primary', onClick: () => this.clickEvent.emit({ name: BusinessFormClickActions.submit }), isLoading: this.isSaving }, "Submit"))))));
     }
     static get is() { return "justifi-business-form"; }
     static get encapsulation() { return "shadow"; }
@@ -117,7 +120,6 @@ export class BusinessForm {
         return {
             "authToken": {
                 "type": "string",
-                "attribute": "auth-token",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -132,11 +134,11 @@ export class BusinessForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "auth-token"
             },
             "businessId": {
                 "type": "string",
-                "attribute": "business-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -151,11 +153,11 @@ export class BusinessForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "business-id"
             },
             "hideErrors": {
                 "type": "boolean",
-                "attribute": "hide-errors",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -171,11 +173,11 @@ export class BusinessForm {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "hide-errors",
                 "defaultValue": "false"
             },
             "formTitle": {
                 "type": "string",
-                "attribute": "form-title",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -191,11 +193,11 @@ export class BusinessForm {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "form-title",
                 "defaultValue": "'Business Information'"
             },
             "removeTitle": {
                 "type": "boolean",
-                "attribute": "remove-title",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -211,6 +213,7 @@ export class BusinessForm {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "remove-title",
                 "defaultValue": "false"
             }
         };
@@ -219,7 +222,8 @@ export class BusinessForm {
         return {
             "isLoading": {},
             "isSaving": {},
-            "errorMessage": {}
+            "errorMessage": {},
+            "country": {}
         };
     }
     static get events() {

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

@@ -1,11 +1,13 @@
 import { Host, h } from "@stencil/core";
-import { PHONE_MASKS, SSN_MASK } from "../../../../utils/form-input-masks";
+import { PHONE_MASKS, IDENTITY_MASKS } from "../../../../utils/form-input-masks";
 import { deconstructDate } from "../../utils/helpers";
-import { heading2 } from "../../../../styles/parts";
+import { heading2, label, inputDisabled, buttonSecondary } from "../../../../styles/parts";
+import { countryLabels } from "../../utils/country-config";
 export class BusinessRepresentative {
     constructor() {
         this.errors = {};
         this.representative = {};
+        this.isEditingIdentification = false;
         this.inputHandler = (name, value) => {
             this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { [name]: value }) }));
         };
@@ -18,22 +20,29 @@ export class BusinessRepresentative {
         };
     }
     get identificationNumberLabel() {
-        return this.representative.ssn_last4 ? 'Update SSN (optional)' : 'SSN';
+        var _a;
+        const label = countryLabels[this.country].idNumberLabel;
+        const labelOptional = countryLabels[this.country].idNumberLabelOptional;
+        return ((_a = this.representative) === null || _a === void 0 ? void 0 : _a.ssn_last4) ? labelOptional : label;
     }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors.representative)));
         this.formController.values.subscribe(values => (this.representative = Object.assign({}, values.representative)));
     }
     render() {
+        var _a, _b;
         const representativeDefaultValue = this.formController.getInitialValues().representative;
-        return (h(Host, { key: '94097bf5ab94fc900918d44510ea8810f2a1984d' }, h("fieldset", { key: '95619d9fa81838e5a08e191845a7343f8b3609ce' }, h("legend", { key: '9ec4d2470dc31e3128c0d3351e3983dc07bca92e', part: heading2 }, "Representative"), h("div", { key: 'a2b1d8ab98e3683c6ad57d6a6dfb259b27a8cd0f', class: "row gy-3" }, h("div", { key: 'ce36f02cde3b989b427418b7c09b92bcbc9638f1', class: "col-12 col-md-8" }, h("form-control-text", { key: '7912bcd5f4f4d5870a08529d09a21994911a7262', name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '57f138c87e53aa0b555dc5d7ebe699c6207e5825', class: "col-12 col-md-4" }, h("form-control-text", { key: 'd98d5cfcb5f4a7e1dd9eb0e55844bb8a210bd305', name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: '08093caed32f9124c48fc73e05b2e5ec698fac5d', class: "col-12 col-md-6" }, h("form-control-text", { key: 'ef868e698b2369934bfeee522d8f4a7ff4924074', name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'ffb1c8a6ccd2df1a198f679ad02d3921821939b9', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'ce4cd6e4edacdc536f74b85341fe35dc4aae435e', name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '27d97a8149ba81e7576e850c8c273298c8394f51', class: "col-12 col-md-4" }, h("form-control-date", { key: '5cd76163b49822f9dcbd3339c89a0afffcc4247f', name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { key: '62bd3c48ccc31d7f36a00bc27eafefc3369226e3', class: "col-12 col-md-8" }, h("form-control-number-masked", { key: '7d43730b2615e7b515ca6c66d90ceeb573e61d6a', name: "identification_number", label: this.identificationNumberLabel, defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: SSN_MASK })), h("div", { key: 'ec6cb5f493f5335f6b0490894577eb401f1c150a', class: "col-12" }, h("justifi-identity-address-form", { key: '6ecffcd10914504148573e99a708cae6d6976cd2', errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate }))))));
+        return (h(Host, { key: '1ce133c6cf1804607b661953bb9d952e6dfdede7' }, h("fieldset", { key: '759e0e7adc03c8814e09effd245e7c25f9fcf536' }, h("legend", { key: '625eb15226d9318075c57c7e13d6b8a04686f00f', part: heading2 }, "Representative"), h("div", { key: '8b11c10cd073c3ffcb7c52f97c463b91a5609afa', class: "row gy-3" }, h("div", { key: '35b0b9a741ee46dfc049ea5914dfa672e4bd64f3', class: "col-12 col-md-8" }, h("form-control-text", { key: '577cb8c5911c5a8364de282ca04e75b045d6de36', name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '3ebaa46f7045f1db417285fe3ef9c19310dbe0c6', class: "col-12 col-md-4" }, h("form-control-text", { key: '69eb59adf3da1d3d48b1d395badd4c76ac0d8383', name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: 'd9ee1e3a4919e5d714f34ff1417677a48101166f', class: "col-12 col-md-6" }, h("form-control-text", { key: 'cc6c0e28dc815985be5309de33957fcd37f53b29', name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'd40a0a637c921ca6e8fa4aa347369c029c4569cb', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'ce15cd57570e34d14bc596c1b5f7e49d3f33ea36', name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: '1504ac209231141b564412af3719b2ab6d84e553', class: "col-12 col-md-4" }, h("form-control-date", { key: '8fe92ed396ab947f439a04e2b67787725b393dcb', name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { key: 'd8ee89f3f4124ebb222d99a9337db4be7ab7df61', class: "col-12 col-md-8" }, (!((_a = this.representative) === null || _a === void 0 ? void 0 : _a.ssn_last4) || this.isEditingIdentification) ? (h("form-control-number-masked", { name: "identification_number", label: this.identificationNumberLabel, defaultValue: this.isEditingIdentification ? '' : representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.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 }, this.identificationNumberLabel), h("div", { class: "input-group mb-3" }, h("input", { type: "text", class: "form-control", part: inputDisabled, value: `****${(_b = this.representative) === null || _b === void 0 ? void 0 : _b.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
+                this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { ssn_last4: null, identification_number: '' }) }));
+            } }, "Change"))))), h("div", { key: '54548bf9622fcc949ebd91db29cc8b877dd7652d', class: "col-12" }, h("justifi-identity-address-form", { key: '9925b7d70bceb8e3d1dafc9313673a5c8a0810a0', errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))))));
     }
     static get is() { return "justifi-business-representative"; }
     static get properties() {
         return {
             "formController": {
                 "type": "any",
-                "attribute": "form-controller",
                 "mutable": false,
                 "complexType": {
                     "original": "FormController",
@@ -53,14 +62,41 @@ export class BusinessRepresentative {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "form-controller"
+            },
+            "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 {
             "errors": {},
-            "representative": {}
+            "representative": {},
+            "isEditingIdentification": {}
         };
     }
 }

package/dist/collection/components/business-forms/business-form/legal-address-form/legal-address-form.js

@@ -1,6 +1,4 @@
 import { Host, h } from "@stencil/core";
-import StateOptions from "../../../../utils/state-options";
-import { numberOnlyHandler } from "../../../../ui-components/form/utils";
 import { heading2 } from "../../../../styles/parts";
 export class LegalAddressForm {
     constructor() {
@@ -15,18 +13,15 @@ export class LegalAddressForm {
         this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { legal_address: Object.assign(Object.assign({}, this.formController.values.getValue().legal_address), { [name]: value }) }));
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a;
         const legalAddressDefaultValue = this.formController.getInitialValues().legal_address;
-        return (h(Host, { key: '3b391bb2404c911e1663835acf0d13e7aab73735' }, h("fieldset", { key: 'f5db5dd65ba422e05728b38e562d1140777f4208' }, h("legend", { key: 'a1e464501561d649b6b514de45967d84d5f69f2a', part: heading2 }, "Business Legal Address"), h("div", { key: 'f64e06197c22f9d0cddb7b78d181aec203070612', class: "row gy-3" }, h("div", { key: '0c5ed4640de17b420021beedf69fbf6fedc16b5e', class: "col-12" }, h("form-control-text", { key: '449f633ae6ff84855258898a90f9adfc028b9685', name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, errorText: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { key: '6cdc7bd96fbcdccf3d2da67ce2c0c110be6f215f', class: "col-12" }, h("form-control-text", { key: '5d179741b7462cd569f43aaa16ea78a89dd2f7dd', name: "line2", label: "Address Line 2", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, errorText: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.line2 })), h("div", { key: '55df7defd5dff8f7b56d639319c4067b53ce8fb8', class: "col-12" }, h("form-control-text", { key: 'dfb822432d69a8e53424faa4e5ffb00d25601836', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, errorText: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.city })), h("div", { key: '533670b7a9b60d45bf05684b48c2034f99d4b484', class: "col-12" }, h("form-control-select", { key: 'f10ed112c00c798c1b482f8893ef04737deb1dc5', name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, errorText: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.state })), h("div", { key: '7d67e97ebbb48402ede6aed07fe72154cf3424fa', class: "col-12" }, h("form-control-text", { key: '5bccb6167aac8b9f64254dc93376f51b6489c0c9', name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, errorText: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler })), h("div", { key: '8a03c711d712e013590d5489d3bffa5145ac0a7a', class: "col-12" }, h("form-control-select", { key: 'e58697ad7a448ab860a8f72a053dbaf030faabbd', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, errorText: (_m = (_l = this.errors) === null || _l === void 0 ? void 0 : _l.legal_address) === null || _m === void 0 ? void 0 : _m.country,
-            // just for now so we skip handling country specificities
-            disabled: true }))))));
+        return (h(Host, { key: '0e6136a175ee0bb8708d1848ad850bd973f60c4b' }, h("fieldset", { key: '2fcfb7b8cc1bf70157dbfaba7bb5df9ddd82454b' }, h("legend", { key: 'ce30f5e679113cceda046f142e01548a1db573a0', part: heading2 }, "Business Legal Address"), h("justifi-form-address-fields", { key: 'a091d88fb62401c814458d696866de64a26a6bff', country: this.country, errors: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address, defaultValues: legalAddressDefaultValue, inputHandler: this.inputHandler }))));
     }
     static get is() { return "justifi-legal-address-form"; }
     static get properties() {
         return {
             "formController": {
                 "type": "any",
-                "attribute": "form-controller",
                 "mutable": false,
                 "complexType": {
                     "original": "FormController",
@@ -46,7 +41,33 @@ export class LegalAddressForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "form-controller"
+            },
+            "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/owner-form/identity-address/identity-address-form.js

@@ -1,6 +1,4 @@
 import { Host, h } from "@stencil/core";
-import StateOptions from "../../../../utils/state-options";
-import { numberOnlyHandler } from "../../../../ui-components/form/utils";
 export class IdentityAddressForm {
     constructor() {
         this.address = {};
@@ -13,17 +11,13 @@ export class IdentityAddressForm {
         this.handleFormUpdate(newValues);
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return (h(Host, { key: '63db91625abddc3e615b031e04366a5823d516cf' }, h("div", { key: 'e07f0e511b178471343594fe0c88ae286325a5e5', class: "row gy-3" }, h("div", { key: 'a22674f05f19378994eceb7386c29f579c285a26', class: "col-12 col-md-8" }, h("form-control-text", { key: 'c6cfe95a8ce577a162e4eae61ff7d61902b36e73', name: "line1", label: "Street Address", defaultValue: (_a = this.defaultValues) === null || _a === void 0 ? void 0 : _a.line1, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line1, inputHandler: this.inputHandler, helpText: "\u200B\u200BEnter your address exactly as stated on your driver's license. No PO Boxes." })), h("div", { key: 'de08102a8f4948a929f4fd9194ba7eb2f075d507', class: "col-12 col-md-4" }, h("form-control-text", { key: '8dd269cbd72719ff4ad7b85693ed67e1fdd88225', name: "line2", label: "Apartment, Suite, etc. (optional)", defaultValue: (_c = this.defaultValues) === null || _c === void 0 ? void 0 : _c.line2, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.line2, inputHandler: this.inputHandler })), h("div", { key: 'a1081a9a0016dc5fe06106ffdb0063374389f5de', class: "col-12" }, h("form-control-text", { key: '94b340156ae354a87a93a8cb44bbc0a2f6507489', name: "city", label: "City", defaultValue: (_e = this.defaultValues) === null || _e === void 0 ? void 0 : _e.city, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.city, inputHandler: this.inputHandler })), h("div", { key: '66732609b564a08b4b907e9a50aab38a782b0cbc', class: "col-12 col-md-6" }, h("form-control-select", { key: '8f91fd2a2ae886044b105f21177c0ccd893c3993', name: "state", label: "State", defaultValue: (_g = this.defaultValues) === null || _g === void 0 ? void 0 : _g.state, options: StateOptions, errorText: (_h = this.errors) === null || _h === void 0 ? void 0 : _h.state, inputHandler: this.inputHandler })), h("div", { key: 'ebec4b6351ccb7741e195806f1897436e10404cc', class: "col-12 col-md-6" }, h("form-control-text", { key: '2d0884fb5acd8e2557fb5ece1b735e6d5945f2a1', name: "postal_code", label: "Postal Code", defaultValue: (_j = this.defaultValues) === null || _j === void 0 ? void 0 : _j.postal_code, errorText: (_k = this.errors) === null || _k === void 0 ? void 0 : _k.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler, inputHandler: this.inputHandler })), h("div", { key: '8051b9545fd8a93fec6f1c00623c2e2876912db7', class: "col-12" }, h("form-control-select", { key: 'c68c63ce249f139f4d1df8820f0e1dd56763a67f', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: (_l = this.defaultValues) === null || _l === void 0 ? void 0 : _l.country, errorText: (_m = this.errors) === null || _m === void 0 ? void 0 : _m.country,
-            // just for now so we skip handling country specificities
-            disabled: true })))));
+        return (h(Host, { key: 'c9b75fa8c884fb755cd26be4433022f278794e4e' }, h("justifi-form-address-fields", { key: '2f9cfa3fc695de214d9203c680e6cb115d714b82', country: this.country, errors: this.errors, defaultValues: this.defaultValues, inputHandler: this.inputHandler })));
     }
     static get is() { return "justifi-identity-address-form"; }
     static get properties() {
         return {
             "handleFormUpdate": {
                 "type": "unknown",
-                "attribute": "handle-form-update",
                 "mutable": false,
                 "complexType": {
                     "original": "(values: any) => void",
@@ -41,7 +35,6 @@ export class IdentityAddressForm {
             },
             "errors": {
                 "type": "any",
-                "attribute": "errors",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -56,11 +49,11 @@ export class IdentityAddressForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "errors"
             },
             "defaultValues": {
                 "type": "any",
-                "attribute": "default-values",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -75,7 +68,33 @@ export class IdentityAddressForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "default-values"
+            },
+            "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"
             }
         };
     }