@justifi/webcomponents 4.10.0 → 4.11.0

package/dist/module/justifi-payment-details.js

@@ -1,14 +1,15 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { P as PaymentService } from './payment.service.js';
 import './Pagination.js';
 import { b as Payment } from './Payment.js';
 import './Payout.js';
-import { g as getErrorMessage } from './utils3.js';
+import { C as ComponentErrorSeverity, g as getErrorMessage, a as getErrorCode, b as ComponentErrorCodes } from './utils3.js';
 import { E as ErrorState } from './utils.js';
 import { d as defineCustomElement$3 } from './details.js';
 import { d as defineCustomElement$2 } from './payment-details-core2.js';
 
 const makeGetPaymentDetails = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
+    var _a;
     try {
         const response = await service.fetchPayment(id, authToken);
         if (!response.error) {
@@ -16,11 +17,21 @@ const makeGetPaymentDetails = ({ id, authToken, service }) => async ({ onSuccess
         }
         else {
             const responseError = getErrorMessage(response.error);
-            onError(`Error trying to fetch data : ${responseError}`);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     catch (error) {
-        onError(`Error trying to fetch data : ${error}`);
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        onError({
+            error: getErrorMessage(error),
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };
 
@@ -29,7 +40,12 @@ const PaymentDetails = /*@__PURE__*/ proxyCustomElement(class PaymentDetails ext
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.errorEvent = createEvent(this, "error-event", 7);
         this.paymentService = new PaymentService();
+        this.handleErrorEvent = event => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
         this.paymentId = undefined;
         this.authToken = undefined;
         this.getPaymentDetails = undefined;
@@ -51,13 +67,18 @@ const PaymentDetails = /*@__PURE__*/ proxyCustomElement(class PaymentDetails ext
         }
         else {
             this.errorMessage = 'Payment ID and Auth Token are required';
+            this.errorEvent.emit({
+                message: this.errorMessage,
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     render() {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h("payment-details-core", { getPaymentDetails: this.getPaymentDetails }));
+        return (h("payment-details-core", { getPaymentDetails: this.getPaymentDetails, "onError-event": this.handleErrorEvent }));
     }
     static get watchers() { return {
         "paymentId": ["propChanged"],

package/dist/module/justifi-payment-form.js

@@ -4,6 +4,7 @@ import { P as PaymentMethodTypes } from './Payment.js';
 import './Payout.js';
 import { l as loadFontsOnParent } from './utils2.js';
 import { c as config } from './config.js';
+import { b as ComponentErrorCodes, C as ComponentErrorSeverity, g as getErrorMessage } from './utils3.js';
 import { d as defineCustomElement$6 } from './billing-form.js';
 import { d as defineCustomElement$5 } from './payment-method-form.js';
 import { d as defineCustomElement$4 } from './payment-method-selector.js';
@@ -18,6 +19,7 @@ const PaymentForm = /*@__PURE__*/ proxyCustomElement(class PaymentForm extends H
         this.__registerHost();
         this.__attachShadow();
         this.submitted = createEvent(this, "submitted", 7);
+        this.errorEvent = createEvent(this, "error-event", 7);
         this.bankAccount = undefined;
         this.card = true;
         this.email = undefined;
@@ -37,6 +39,9 @@ const PaymentForm = /*@__PURE__*/ proxyCustomElement(class PaymentForm extends H
     async enableSubmitButton() {
         this.submitButtonEnabled = true;
     }
+    async disableSubmitButton() {
+        this.submitButtonEnabled = false;
+    }
     paymentMethodSelectedHandler(event) {
         const paymentMethodType = event.detail;
         this.selectedPaymentMethodType = paymentMethodType;
@@ -55,12 +60,20 @@ const PaymentForm = /*@__PURE__*/ proxyCustomElement(class PaymentForm extends H
             const paymentMethodData = Object.assign({ email: this.email }, billingFormFieldValues);
             const tokenizeResponse = await this.paymentMethodFormRef.tokenize(this.clientId, paymentMethodData, this.accountId);
             if (tokenizeResponse.error) {
-                console.error(`An error occured submitting the form: ${tokenizeResponse.error.message}`);
+                this.errorEvent.emit({
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    message: tokenizeResponse.error.message,
+                    severity: ComponentErrorSeverity.ERROR
+                });
             }
             this.submitted.emit(tokenizeResponse);
         }
         catch (error) {
-            console.error(`An error occured submitting the form: ${error}`);
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.UNKNOWN_ERROR,
+                message: getErrorMessage(error),
+                severity: ComponentErrorSeverity.ERROR
+            });
         }
         finally {
             this.isLoading = false;
@@ -75,7 +88,7 @@ const PaymentForm = /*@__PURE__*/ proxyCustomElement(class PaymentForm extends H
                 if (el) {
                     this.billingFormRef = el;
                 }
-            } })), h("slot", { name: 'insurance' }), h("div", { class: "col-12" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}` }, this.isLoading ?
+            } })), h("slot", { name: 'insurance' }), h("div", { class: "col-12" }, h("button", { "data-testid": "submit-button", type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}` }, this.isLoading ?
             h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")) :
             this.submitButtonText || 'Submit')))));
     }
@@ -91,7 +104,8 @@ const PaymentForm = /*@__PURE__*/ proxyCustomElement(class PaymentForm extends H
         "isLoading": [32],
         "selectedPaymentMethodType": [32],
         "fillBillingForm": [64],
-        "enableSubmitButton": [64]
+        "enableSubmitButton": [64],
+        "disableSubmitButton": [64]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/module/justifi-payment-provisioning.js

@@ -8,10 +8,10 @@ import { d as defineCustomElement$b } from './form-control-number-masked2.js';
 import { d as defineCustomElement$a } from './form-control-select2.js';
 import { d as defineCustomElement$9 } from './form-control-text2.js';
 import { d as defineCustomElement$8 } from './business-additional-questions-form-step.js';
-import { d as defineCustomElement$7 } from './business-address-form.js';
-import { d as defineCustomElement$6 } from './business-core-info-form-step.js';
-import { d as defineCustomElement$5 } from './business-owners-form-step.js';
-import { d as defineCustomElement$4 } from './business-representative-form-step.js';
+import { d as defineCustomElement$7 } from './business-core-info-form-step.js';
+import { d as defineCustomElement$6 } from './business-owners-form-step.js';
+import { d as defineCustomElement$5 } from './business-representative-form-step.js';
+import { d as defineCustomElement$4 } from './identity-address-form.js';
 import { d as defineCustomElement$3 } from './legal-address-form-step.js';
 import { d as defineCustomElement$2 } from './owner-form.js';
 
@@ -21,14 +21,20 @@ const PaymentProvisioning = /*@__PURE__*/ proxyCustomElement(class PaymentProvis
     constructor() {
         super();
         this.__registerHost();
-        this.clickEvent = createEvent(this, "clickEvent", 7);
+        this.clickEvent = createEvent(this, "click-event", 7);
         this.refs = [];
         this.componentStepMapping = {
-            0: () => h("justifi-business-core-info-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[0] = el, onFormLoading: (e) => this.handleFormLoading(e), onServerError: (e) => this.handleServerErrors(e) }),
-            1: () => h("justifi-legal-address-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[1] = el, onFormLoading: (e) => this.handleFormLoading(e), onServerError: (e) => this.handleServerErrors(e) }),
-            2: () => h("justifi-additional-questions-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[2] = el, onFormLoading: (e) => this.handleFormLoading(e), onServerError: (e) => this.handleServerErrors(e) }),
-            3: () => h("justifi-business-representative-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[3] = el, onFormLoading: (e) => this.handleFormLoading(e), onServerError: (e) => this.handleServerErrors(e) }),
-            4: () => h("justifi-business-owners-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[4] = el, onFormLoading: (e) => this.handleFormLoading(e), onServerError: (e) => this.handleServerErrors(e) }),
+            0: () => h("justifi-business-core-info-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[0] = el, onFormLoading: this.handleFormLoading, onServerError: this.handleServerErrors, allowOptionalFields: this.allowOptionalFields }),
+            1: () => h("justifi-legal-address-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[1] = el, onFormLoading: this.handleFormLoading, onServerError: this.handleServerErrors, allowOptionalFields: this.allowOptionalFields }),
+            2: () => h("justifi-additional-questions-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[2] = el, onFormLoading: this.handleFormLoading, onServerError: this.handleServerErrors, allowOptionalFields: this.allowOptionalFields }),
+            3: () => h("justifi-business-representative-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[3] = el, onFormLoading: this.handleFormLoading, onServerError: this.handleServerErrors, allowOptionalFields: this.allowOptionalFields }),
+            4: () => h("justifi-business-owners-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[4] = el, onFormLoading: this.handleFormLoading, onServerError: this.handleServerErrors, allowOptionalFields: this.allowOptionalFields }),
+        };
+        this.handleFormLoading = (e) => {
+            this.formLoading = e.detail;
+        };
+        this.handleServerErrors = (e) => {
+            this.errorMessage = e.detail.message;
         };
         this.incrementSteps = () => {
             if (this.currentStep < this.totalSteps) {
@@ -40,6 +46,7 @@ const PaymentProvisioning = /*@__PURE__*/ proxyCustomElement(class PaymentProvis
         this.businessId = undefined;
         this.testMode = false;
         this.hideErrors = false;
+        this.allowOptionalFields = false;
         this.formLoading = false;
         this.errorMessage = '';
         this.currentStep = 0;
@@ -61,12 +68,6 @@ const PaymentProvisioning = /*@__PURE__*/ proxyCustomElement(class PaymentProvis
         this.refs = [this.coreInfoRef, this.legalAddressRef, this.additionalQuestionsRef, this.representativeRef, this.ownersRef];
         this.totalSteps = Object.keys(this.componentStepMapping).length - 1;
     }
-    handleFormLoading(e) {
-        this.formLoading = e.detail;
-    }
-    handleServerErrors(e) {
-        this.errorMessage = e.detail.message;
-    }
     showPreviousStepButton() {
         return this.currentStep > 0;
     }
@@ -75,8 +76,7 @@ const PaymentProvisioning = /*@__PURE__*/ proxyCustomElement(class PaymentProvis
     }
     previousStepButtonOnClick() {
         this.clickEvent.emit({ name: BusinessFormClickActions.previousStep });
-        const currentStep = this.refs[this.currentStep];
-        currentStep.validateAndSubmit({ onSuccess: this.decrementSteps });
+        this.decrementSteps();
     }
     nextStepButtonOnClick(e, clickEventName) {
         e.preventDefault();
@@ -99,6 +99,7 @@ const PaymentProvisioning = /*@__PURE__*/ proxyCustomElement(class PaymentProvis
         "businessId": [1, "business-id"],
         "testMode": [4, "test-mode"],
         "hideErrors": [4, "hide-errors"],
+        "allowOptionalFields": [4, "allow-optional-fields"],
         "formLoading": [32],
         "errorMessage": [32],
         "currentStep": [32],
@@ -108,7 +109,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-payment-provisioning", "form-control-datepart", "form-control-monetary", "form-control-number", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-additional-questions-form-step", "justifi-business-address-form", "justifi-business-core-info-form-step", "justifi-business-owners-form-step", "justifi-business-representative-form-step", "justifi-legal-address-form-step", "justifi-owner-form"];
+    const components = ["justifi-payment-provisioning", "form-control-datepart", "form-control-monetary", "form-control-number", "form-control-number-masked", "form-control-select", "form-control-text", "justifi-additional-questions-form-step", "justifi-business-core-info-form-step", "justifi-business-owners-form-step", "justifi-business-representative-form-step", "justifi-identity-address-form", "justifi-legal-address-form-step", "justifi-owner-form"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-payment-provisioning":
             if (!customElements.get(tagName)) {
@@ -150,22 +151,22 @@ function defineCustomElement$1() {
                 defineCustomElement$8();
             }
             break;
-        case "justifi-business-address-form":
+        case "justifi-business-core-info-form-step":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "justifi-business-core-info-form-step":
+        case "justifi-business-owners-form-step":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "justifi-business-owners-form-step":
+        case "justifi-business-representative-form-step":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "justifi-business-representative-form-step":
+        case "justifi-identity-address-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/module/justifi-payments-list.js

@@ -1,16 +1,16 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { P as PaymentService } from './payment.service.js';
 import './Pagination.js';
 import { b as Payment } from './Payment.js';
 import './Payout.js';
-import { g as getErrorMessage } from './utils3.js';
+import { C as ComponentErrorSeverity, g as getErrorMessage, a as getErrorCode, b as ComponentErrorCodes } from './utils3.js';
 import { E as ErrorState } from './utils.js';
 import { d as defineCustomElement$4 } from './table.js';
 import { d as defineCustomElement$3 } from './pagination-menu2.js';
 import { d as defineCustomElement$2 } from './payments-list-core2.js';
 
 const makeGetPayments = ({ id, authToken, service }) => async ({ params, onSuccess, onError }) => {
-    var _a;
+    var _a, _b;
     try {
         const response = await service.fetchPayments(id, authToken, params);
         if (!response.error) {
@@ -20,11 +20,21 @@ const makeGetPayments = ({ id, authToken, service }) => async ({ params, onSucce
         }
         else {
             const responseError = getErrorMessage(response.error);
-            return onError(responseError);
+            const code = getErrorCode((_b = response.error) === null || _b === void 0 ? void 0 : _b.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     catch (error) {
-        return onError(error.message || error);
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };
 
@@ -33,6 +43,11 @@ const PaymentsList = /*@__PURE__*/ proxyCustomElement(class PaymentsList extends
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.handleErrorEvent = (event) => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
         this.accountId = undefined;
         this.authToken = undefined;
         this.getPayments = undefined;
@@ -54,13 +69,18 @@ const PaymentsList = /*@__PURE__*/ proxyCustomElement(class PaymentsList extends
         }
         else {
             this.errorMessage = 'Account ID and Auth Token are required';
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                message: this.errorMessage,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     render() {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h("payments-list-core", { getPayments: this.getPayments }));
+        return (h("payments-list-core", { getPayments: this.getPayments, "onError-event": this.handleErrorEvent }));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

package/dist/module/justifi-payout-details.js

@@ -1,14 +1,15 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { P as PayoutService } from './payout.service.js';
 import './Pagination.js';
 import './Payment.js';
 import { P as Payout } from './Payout.js';
-import { g as getErrorMessage } from './utils3.js';
+import { C as ComponentErrorSeverity, g as getErrorMessage, a as getErrorCode, b as ComponentErrorCodes } from './utils3.js';
 import { E as ErrorState } from './utils.js';
 import { d as defineCustomElement$3 } from './details.js';
 import { d as defineCustomElement$2 } from './payout-details-core2.js';
 
 const makeGetPayoutDetails = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
+    var _a;
     try {
         const response = await service.fetchPayout(id, authToken);
         if (!response.error) {
@@ -16,14 +17,23 @@ const makeGetPayoutDetails = ({ id, authToken, service }) => async ({ onSuccess,
             onSuccess(payout);
         }
         else {
-            const responseError = getErrorMessage(response.error);
-            const errorMessage = `Error fetching payout details: ${responseError}`;
-            onError(errorMessage);
+            const errorMessage = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            onError({
+                error: errorMessage,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     catch (error) {
-        const errorMessage = `Error fetching payout details: ${error}`;
-        onError(errorMessage);
+        const errorMessage = getErrorMessage(error);
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        onError({
+            error: errorMessage,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };
 
@@ -32,6 +42,11 @@ const PayoutDetails = /*@__PURE__*/ proxyCustomElement(class PayoutDetails exten
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.handleErrorEvent = (event) => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
         this.payoutId = undefined;
         this.authToken = undefined;
         this.getPayout = undefined;
@@ -53,13 +68,18 @@ const PayoutDetails = /*@__PURE__*/ proxyCustomElement(class PayoutDetails exten
         }
         else {
             this.errorMessage = 'Failed to load payout details. payoutId or authToken is not provided.';
+            this.errorEvent.emit({
+                message: this.errorMessage,
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR
+            });
         }
     }
     render() {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h("payout-details-core", { getPayout: this.getPayout }));
+        return (h("payout-details-core", { getPayout: this.getPayout, "onError-event": this.handleErrorEvent }));
     }
     static get watchers() { return {
         "payoutId": ["propChanged"],

package/dist/module/justifi-payouts-list.js

@@ -1,16 +1,16 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { t as tableExportedParts, d as defineCustomElement$4 } from './table.js';
 import { P as PayoutService } from './payout.service.js';
 import './Pagination.js';
 import './Payment.js';
 import { P as Payout } from './Payout.js';
-import { g as getErrorMessage } from './utils3.js';
+import { C as ComponentErrorSeverity, g as getErrorMessage, a as getErrorCode, b as ComponentErrorCodes } from './utils3.js';
 import { E as ErrorState } from './utils.js';
 import { d as defineCustomElement$3 } from './pagination-menu2.js';
 import { d as defineCustomElement$2 } from './payouts-list-core2.js';
 
 const makeGetPayouts = ({ id, authToken, service }) => async ({ params, onSuccess, onError }) => {
-    var _a;
+    var _a, _b;
     try {
         const response = await service.fetchPayouts(id, authToken, params);
         if (!response.error) {
@@ -19,12 +19,23 @@ const makeGetPayouts = ({ id, authToken, service }) => async ({ params, onSucces
             onSuccess({ payouts, pagingInfo });
         }
         else {
-            const responseError = getErrorMessage(response.error);
-            return onError(responseError);
+            const error = getErrorMessage(response.error);
+            const code = getErrorCode((_b = response.error) === null || _b === void 0 ? void 0 : _b.code);
+            return onError({
+                error,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     catch (error) {
-        return onError(error.message || error);
+        const message = getErrorMessage(error);
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: message,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };
 
@@ -33,6 +44,11 @@ const PayoutsList = /*@__PURE__*/ proxyCustomElement(class PayoutsList extends H
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.handleOnError = (event) => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
         this.accountId = undefined;
         this.authToken = undefined;
         this.getPayouts = undefined;
@@ -54,13 +70,17 @@ const PayoutsList = /*@__PURE__*/ proxyCustomElement(class PayoutsList extends H
         }
         else {
             this.errorMessage = 'Account ID and Auth Token are required';
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                message: 'Account ID and Auth Token are required',
+            });
         }
     }
     render() {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h(Host, { exportedparts: tableExportedParts }, h("payouts-list-core", { getPayouts: this.getPayouts })));
+        return (h(Host, { exportedparts: tableExportedParts }, h("payouts-list-core", { getPayouts: this.getPayouts, "onError-event": this.handleOnError })));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

package/dist/module/legal-address-form-step.js

@@ -3,11 +3,11 @@ import { F as FormController } from './form.js';
 import { A as Api } from './Api.js';
 import { a as Address } from './Business.js';
 import { c as parseAddressInfo } from './payload-parsers.js';
-import { l as legalAddressSchema } from './business-address-schema.js';
+import { a as addressSchema } from './business-address-schema.js';
 import { c as config } from './config.js';
 import { B as BusinessFormServerErrors } from './business-form-types.js';
 import { S as StateOptions } from './state-options.js';
-import { d as defineCustomElement$3 } from './form-control-number2.js';
+import { f as filterPostalInput } from './utils4.js';
 import { d as defineCustomElement$2 } from './form-control-select2.js';
 import { d as defineCustomElement$1 } from './form-control-text2.js';
 
@@ -53,6 +53,7 @@ const LegalAddressFormStep = /*@__PURE__*/ proxyCustomElement(class LegalAddress
         };
         this.authToken = undefined;
         this.businessId = undefined;
+        this.allowOptionalFields = undefined;
         this.formController = undefined;
         this.errors = {};
         this.legal_address = {};
@@ -80,7 +81,7 @@ const LegalAddressFormStep = /*@__PURE__*/ proxyCustomElement(class LegalAddress
             console.error(missingAuthTokenMessage);
         if (!this.businessId)
             console.error(missingBusinessIdMessage);
-        this.formController = new FormController(legalAddressSchema);
+        this.formController = new FormController(addressSchema(this.allowOptionalFields));
         this.api = Api(this.authToken, config.proxyApiOrigin);
         this.fetchData();
     }
@@ -89,9 +90,9 @@ const LegalAddressFormStep = /*@__PURE__*/ proxyCustomElement(class LegalAddress
         this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors)));
     }
     render() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const legalAddressDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "Business Legal Address"), h("hr", null), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-12" }, h("form-control-text", { name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, error: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.line1 })), h("div", { class: "col-12" }, h("form-control-text", { name: "line2", label: "Address Line 2", inputHandler: (name, value) => this.inputHandler(name, value), defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2 })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, error: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.city })), h("div", { class: "col-12" }, h("form-control-select", { name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, error: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.state })), h("div", { class: "col-12" }, h("form-control-number", { name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, error: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.postal_code })), h("div", { class: "col-12" }, h("form-control-select", { name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, error: (_e = this.errors) === null || _e === void 0 ? void 0 : _e.country,
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, h("legend", null, "Business Legal Address"), h("hr", null), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-12" }, h("form-control-text", { name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, error: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.line1 })), h("div", { class: "col-12" }, h("form-control-text", { name: "line2", label: "Address Line 2", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, error: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line2 })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, error: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.city })), h("div", { class: "col-12" }, h("form-control-select", { name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, error: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.state })), h("div", { class: "col-12" }, h("form-control-text", { name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, error: (_e = this.errors) === null || _e === void 0 ? void 0 : _e.postal_code, maxLength: 5, keyDownHandler: filterPostalInput })), h("div", { class: "col-12" }, h("form-control-select", { name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, error: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.country,
             // just for now so we skip handling country specificities
             disabled: true })))))));
     }
@@ -99,6 +100,7 @@ const LegalAddressFormStep = /*@__PURE__*/ proxyCustomElement(class LegalAddress
 }, [0, "justifi-legal-address-form-step", {
         "authToken": [1, "auth-token"],
         "businessId": [1, "business-id"],
+        "allowOptionalFields": [4, "allow-optional-fields"],
         "formController": [32],
         "errors": [32],
         "legal_address": [32],
@@ -108,18 +110,13 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-legal-address-form-step", "form-control-number", "form-control-select", "form-control-text"];
+    const components = ["justifi-legal-address-form-step", "form-control-select", "form-control-text"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-legal-address-form-step":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, LegalAddressFormStep);
             }
             break;
-        case "form-control-number":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();

package/dist/module/legal-address-form.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './form-control-number2.js';
+import { S as StateOptions } from './state-options.js';
+import { f as filterPostalInput } from './utils4.js';
 import { d as defineCustomElement$2 } from './form-control-select2.js';
 import { d as defineCustomElement$1 } from './form-control-text2.js';
 
@@ -22,9 +23,9 @@ const LegalAddressForm = /*@__PURE__*/ proxyCustomElement(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;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         const legalAddressDefaultValue = this.formController.getInitialValues().legal_address;
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Business Legal Address"), h("hr", null), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-12" }, h("form-control-text", { name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, error: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { class: "col-12" }, h("form-control-text", { name: "line2", label: "Address Line 2", inputHandler: (name, value) => this.inputHandler(name, value), defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2 })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, error: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.city })), h("div", { class: "col-12" }, h("form-control-text", { name: "state", label: "State", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, error: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.state })), h("div", { class: "col-12" }, h("form-control-number", { name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, error: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.postal_code })), h("div", { class: "col-12" }, h("form-control-select", { name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, error: (_k = (_j = this.errors) === null || _j === void 0 ? void 0 : _j.legal_address) === null || _k === void 0 ? void 0 : _k.country,
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "Business Legal Address"), h("hr", null), h("div", { class: "row gx-2 gy-2" }, h("div", { class: "col-12" }, h("form-control-text", { name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, error: (_b = (_a = this.errors) === null || _a === void 0 ? void 0 : _a.legal_address) === null || _b === void 0 ? void 0 : _b.line1 })), h("div", { class: "col-12" }, h("form-control-text", { name: "line2", label: "Address Line 2", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, error: (_d = (_c = this.errors) === null || _c === void 0 ? void 0 : _c.legal_address) === null || _d === void 0 ? void 0 : _d.line2 })), h("div", { class: "col-12" }, h("form-control-text", { name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, error: (_f = (_e = this.errors) === null || _e === void 0 ? void 0 : _e.legal_address) === null || _f === void 0 ? void 0 : _f.city })), h("div", { class: "col-12" }, h("form-control-select", { name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, error: (_h = (_g = this.errors) === null || _g === void 0 ? void 0 : _g.legal_address) === null || _h === void 0 ? void 0 : _h.state })), h("div", { class: "col-12" }, h("form-control-text", { name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, error: (_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: filterPostalInput })), h("div", { class: "col-12" }, h("form-control-select", { name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, error: (_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 }))))));
     }
@@ -38,18 +39,13 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-legal-address-form", "form-control-number", "form-control-select", "form-control-text"];
+    const components = ["justifi-legal-address-form", "form-control-select", "form-control-text"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-legal-address-form":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, LegalAddressForm);
             }
             break;
-        case "form-control-number":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
         case "form-control-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();