@justifi/webcomponents 4.10.0 → 4.12.0

package/dist/module/justifi-checkout.js

@@ -5,12 +5,13 @@ import './Pagination.js';
 import './Payment.js';
 import './Payout.js';
 import { c as config } from './config.js';
-import { d as defineCustomElement$9 } from './billing-form.js';
-import { d as defineCustomElement$8 } from './checkout-core.js';
-import { d as defineCustomElement$7 } from './new-payment-method.js';
-import { d as defineCustomElement$6 } from './payment-method-form.js';
-import { d as defineCustomElement$5 } from './payment-method-options.js';
-import { d as defineCustomElement$4 } from './saved-payment-method.js';
+import { d as defineCustomElement$a } from './billing-form.js';
+import { d as defineCustomElement$9 } from './checkout-core.js';
+import { d as defineCustomElement$8 } from './new-payment-method.js';
+import { d as defineCustomElement$7 } from './payment-method-form.js';
+import { d as defineCustomElement$6 } from './payment-method-options.js';
+import { d as defineCustomElement$5 } from './saved-payment-method.js';
+import { d as defineCustomElement$4 } from './sezzel-payment-method.js';
 import { d as defineCustomElement$3 } from './select-input2.js';
 import { d as defineCustomElement$2 } from './text-input2.js';
 
@@ -30,9 +31,9 @@ const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({ onSucce
         return onError(error.message || error);
     }
 };
-const makePay = ({ authToken, checkoutId, service }) => async ({ paymentMethodToken, onSuccess, onError }) => {
+const makeCheckoutComplete = ({ authToken, checkoutId, service }) => async ({ payment, onSuccess, onError }) => {
     try {
-        const response = await service.pay(authToken, checkoutId, paymentMethodToken);
+        const response = await service.complete(authToken, checkoutId, payment);
         if (!response.error) {
             const checkout = response.data;
             onSuccess({ checkout });
@@ -52,9 +53,13 @@ class CheckoutService {
         const endpoint = `checkouts/${checkoutId}`;
         return Api(authToken, config.proxyApiOrigin).get(endpoint);
     }
-    async pay(authToken, checkoutId, paymentMethodToken) {
-        const endpoint = `checkouts/${checkoutId}/pay`;
-        return Api(authToken, config.proxyApiOrigin).post(endpoint, JSON.stringify({ token: paymentMethodToken }));
+    async complete(authToken, checkoutId, payment) {
+        const endpoint = `checkouts/${checkoutId}/complete`;
+        const payload = { payment_mode: payment.payment_mode };
+        if (payment.payment_token) {
+            payload.payment_token = payment.payment_token;
+        }
+        return Api(authToken, config.proxyApiOrigin).post(endpoint, JSON.stringify(payload));
     }
 }
 
@@ -67,7 +72,7 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         this.authToken = undefined;
         this.checkoutId = undefined;
         this.getCheckout = undefined;
-        this.pay = undefined;
+        this.complete = undefined;
         this.errorMessage = '';
     }
     componentWillLoad() {
@@ -80,7 +85,7 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
                 checkoutId: this.checkoutId,
                 service: new CheckoutService()
             });
-            this.pay = makePay({
+            this.complete = makeCheckoutComplete({
                 authToken: this.authToken,
                 checkoutId: this.checkoutId,
                 service: new CheckoutService()
@@ -94,7 +99,7 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         this.initializeGetCheckout();
     }
     render() {
-        return (h("justifi-checkout-core", { getCheckout: this.getCheckout, pay: this.pay }));
+        return (h("justifi-checkout-core", { getCheckout: this.getCheckout, complete: this.complete }));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
@@ -105,7 +110,7 @@ const Checkout = /*@__PURE__*/ proxyCustomElement(class Checkout extends HTMLEle
         "authToken": [1, "auth-token"],
         "checkoutId": [1, "checkout-id"],
         "getCheckout": [32],
-        "pay": [32],
+        "complete": [32],
         "errorMessage": [32]
     }, undefined, {
         "authToken": ["propChanged"],
@@ -115,7 +120,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["justifi-checkout", "justifi-billing-form", "justifi-checkout-core", "justifi-new-payment-method", "justifi-payment-method-form", "justifi-payment-method-options", "justifi-saved-payment-method", "select-input", "text-input"];
+    const components = ["justifi-checkout", "justifi-billing-form", "justifi-checkout-core", "justifi-new-payment-method", "justifi-payment-method-form", "justifi-payment-method-options", "justifi-saved-payment-method", "justifi-sezzel-payment-method", "select-input", "text-input"];
     components.forEach(tagName => { switch (tagName) {
         case "justifi-checkout":
             if (!customElements.get(tagName)) {
@@ -124,30 +129,35 @@ function defineCustomElement$1() {
             break;
         case "justifi-billing-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "justifi-checkout-core":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "justifi-new-payment-method":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "justifi-payment-method-form":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "justifi-payment-method-options":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "justifi-saved-payment-method":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "justifi-sezzel-payment-method":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/module/justifi-gross-payment-chart.js

@@ -1,6 +1,7 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as config } from './config.js';
 import { A as Api } from './Api.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$2 } from './gross-payment-chart-core2.js';
 
@@ -13,17 +14,30 @@ class ReportsService {
 }
 
 const makeGetGrossPaymentChartData = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
+    var _a;
     try {
         const response = await service.fetchGrossVolumeChartData(id, authToken);
         if (!response.error) {
             onSuccess(response.data);
         }
         else {
-            onError(`Error trying to fetch data : ${response.error}`);
+            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) {
-        onError(`Error trying to fetch data : ${error}`);
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        const errorMessage = getErrorMessage(error);
+        onError({
+            error: errorMessage,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };
 
@@ -32,6 +46,11 @@ const GrossPaymentChart = /*@__PURE__*/ proxyCustomElement(class GrossPaymentCha
         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.getGrossPayment = undefined;
@@ -53,13 +72,18 @@ const GrossPaymentChart = /*@__PURE__*/ proxyCustomElement(class GrossPaymentCha
         }
         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("gross-payment-chart-core", { getGrossPayment: this.getGrossPayment }));
+        return (h("gross-payment-chart-core", { getGrossPayment: this.getGrossPayment, "onError-event": this.handleErrorEvent }));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

package/dist/module/justifi-identity-address-form.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JustifiIdentityAddressForm extends Components.JustifiIdentityAddressForm, HTMLElement {}
+export const JustifiIdentityAddressForm: {
+    prototype: JustifiIdentityAddressForm;
+    new (): JustifiIdentityAddressForm;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/module/justifi-identity-address-form.js

@@ -0,0 +1,6 @@
+import { I as IdentityAddressForm, d as defineCustomElement$1 } from './identity-address-form.js';
+
+const JustifiIdentityAddressForm = IdentityAddressForm;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiIdentityAddressForm, defineCustomElement };

package/dist/module/justifi-payment-balance-transactions.js

@@ -3,7 +3,7 @@ import { A as Api } from './Api.js';
 import { p as pagingDefaults } from './Pagination.js';
 import { a as PaymentBalanceTransaction } from './Payment.js';
 import './Payout.js';
-import { e as formatDate, j as formatTime, s as snakeCaseToHumanReadable, a as formatCurrency } from './utils2.js';
+import { e as formatDate, h as formatTime, s as snakeCaseToHumanReadable, a as formatCurrency } from './utils2.js';
 import { c as config } from './config.js';
 import { d as defineCustomElement$3 } from './table.js';
 import { d as defineCustomElement$2 } from './pagination-menu2.js';

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

@@ -1,17 +1,17 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { F as FormAlert, L as LoadingSpinner } from './utils4.js';
-import { a as BusinessFormClickActions } from './business-form-types.js';
-import { d as defineCustomElement$e } from './form-control-datepart2.js';
+import { b as BusinessFormClickActions } from './business-form-types.js';
+import { d as defineCustomElement$e } from './form-control-date2.js';
 import { d as defineCustomElement$d } from './form-control-monetary2.js';
 import { d as defineCustomElement$c } from './form-control-number2.js';
 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,11 +46,17 @@ const PaymentProvisioning = /*@__PURE__*/ proxyCustomElement(class PaymentProvis
         this.businessId = undefined;
         this.testMode = false;
         this.hideErrors = false;
+        this.allowOptionalFields = false;
+        this.formTitle = 'Business Information';
+        this.removeTitle = false;
         this.formLoading = false;
         this.errorMessage = '';
         this.currentStep = 0;
         this.totalSteps = 5;
     }
+    get title() {
+        return this.removeTitle ? '' : this.formTitle;
+    }
     get showErrors() {
         return this.errorMessage && !this.hideErrors;
     }
@@ -61,12 +73,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 +81,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();
@@ -91,7 +96,7 @@ const PaymentProvisioning = /*@__PURE__*/ proxyCustomElement(class PaymentProvis
         return this.componentStepMapping[this.currentStep]();
     }
     render() {
-        return (h(Host, { exportparts: "label,input,input-invalid" }, h("h1", null, "Business Information"), this.showErrors && FormAlert(this.errorMessage), h("div", { class: "my-4" }, this.currentStepComponent()), h("div", { class: "d-flex justify-content-between align-items-center" }, h("div", { class: "d-flex align-items-center" }, "Step ", this.currentStep + 1, " of ", this.totalSteps + 1), h("div", { class: "d-flex gap-2" }, this.showPreviousStepButton() && (h("button", { type: "button", class: "btn btn-secondary", onClick: () => this.previousStepButtonOnClick(), disabled: this.formLoading }, "Previous")), this.showNextStepButton() && (h("button", { type: "button", class: `btn btn-primary jfi-submit-button${this.formLoading ? ' jfi-submit-button-loading' : ''}`, onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formLoading }, this.formLoading ? LoadingSpinner() : 'Next')), this.showSubmitButton() && (h("button", { type: "submit", class: `btn btn-primary jfi-submit-button${this.formLoading ? ' jfi-submit-button-loading' : ''}`, onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formLoading }, this.formLoading ? LoadingSpinner() : 'Submit'))))));
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("h1", null, this.title), this.showErrors && FormAlert(this.errorMessage), h("div", { class: "my-4" }, this.currentStepComponent()), h("div", { class: "d-flex justify-content-between align-items-center" }, h("div", { class: "d-flex align-items-center" }, "Step ", this.currentStep + 1, " of ", this.totalSteps + 1), h("div", { class: "d-flex gap-2" }, this.showPreviousStepButton() && (h("button", { type: "button", class: "btn btn-secondary", onClick: () => this.previousStepButtonOnClick(), disabled: this.formLoading }, "Previous")), this.showNextStepButton() && (h("button", { type: "button", class: `btn btn-primary jfi-submit-button${this.formLoading ? ' jfi-submit-button-loading' : ''}`, onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formLoading }, this.formLoading ? LoadingSpinner() : 'Next')), this.showSubmitButton() && (h("button", { type: "submit", class: `btn btn-primary jfi-submit-button${this.formLoading ? ' jfi-submit-button-loading' : ''}`, onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formLoading }, this.formLoading ? LoadingSpinner() : 'Submit'))))));
     }
     static get style() { return paymentProvisioningCss; }
 }, [0, "justifi-payment-provisioning", {
@@ -99,6 +104,9 @@ const PaymentProvisioning = /*@__PURE__*/ proxyCustomElement(class PaymentProvis
         "businessId": [1, "business-id"],
         "testMode": [4, "test-mode"],
         "hideErrors": [4, "hide-errors"],
+        "allowOptionalFields": [4, "allow-optional-fields"],
+        "formTitle": [1, "form-title"],
+        "removeTitle": [4, "remove-title"],
         "formLoading": [32],
         "errorMessage": [32],
         "currentStep": [32],
@@ -108,14 +116,14 @@ 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-date", "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)) {
                 customElements.define(tagName, PaymentProvisioning);
             }
             break;
-        case "form-control-datepart":
+        case "form-control-date":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }
@@ -150,22 +158,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"],