@justifi/webcomponents 5.7.1 → 5.7.3

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

@@ -1,12 +1,12 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { DetailItem, DetailSectionTitle } from "../../../ui-components/details/utils";
 import { formatMediumDate, isEmptyObject } from "../../../utils/utils";
 export class JustifiRepresentativeDetails {
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-        if (isEmptyObject(this.representative))
+        if (!this.representative || isEmptyObject(this.representative))
             return null;
-        return (h(Host, null, h(DetailSectionTitle, { sectionTitle: "Representative Details" }), h("div", { class: "d-table gap-2 w-100 mt-3" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Name", value: (_a = this.representative) === null || _a === void 0 ? void 0 : _a.name }), h(DetailItem, { title: "ID", value: (_b = this.representative) === null || _b === void 0 ? void 0 : _b.id }), h(DetailItem, { title: "Address", value: (_d = (_c = this.representative) === null || _c === void 0 ? void 0 : _c.address) === null || _d === void 0 ? void 0 : _d.line1 }), h(DetailItem, { title: "Created At", value: ((_e = this.representative) === null || _e === void 0 ? void 0 : _e.created_at) && formatMediumDate((_f = this.representative) === null || _f === void 0 ? void 0 : _f.created_at) })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Title", value: (_g = this.representative) === null || _g === void 0 ? void 0 : _g.title }), h(DetailItem, { title: "Is Owner?", value: (_h = this.representative) === null || _h === void 0 ? void 0 : _h.is_owner.toString() }), h(DetailItem, { title: "Date Of Birth", value: this.representative && formatMediumDate(new Date(Number((_j = this.representative) === null || _j === void 0 ? void 0 : _j.dob_year), Number((_k = this.representative) === null || _k === void 0 ? void 0 : _k.dob_month) - 1, Number((_l = this.representative) === null || _l === void 0 ? void 0 : _l.dob_day))) }), h(DetailItem, { title: "Email", value: (_m = this.representative) === null || _m === void 0 ? void 0 : _m.email }), h(DetailItem, { title: "Phone", value: (_o = this.representative) === null || _o === void 0 ? void 0 : _o.phone }), h(DetailItem, { title: "Updated At", value: this.representative && formatMediumDate((_p = this.representative) === null || _p === void 0 ? void 0 : _p.updated_at) }))))));
+        return (h("div", null, h(DetailSectionTitle, { sectionTitle: "Representative Details" }), h("div", { class: "d-table gap-2 w-100 mt-3" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Name", value: (_a = this.representative) === null || _a === void 0 ? void 0 : _a.name }), h(DetailItem, { title: "ID", value: (_b = this.representative) === null || _b === void 0 ? void 0 : _b.id }), h(DetailItem, { title: "Address", value: (_d = (_c = this.representative) === null || _c === void 0 ? void 0 : _c.address) === null || _d === void 0 ? void 0 : _d.line1 }), h(DetailItem, { title: "Created At", value: ((_e = this.representative) === null || _e === void 0 ? void 0 : _e.created_at) && formatMediumDate((_f = this.representative) === null || _f === void 0 ? void 0 : _f.created_at) })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Title", value: (_g = this.representative) === null || _g === void 0 ? void 0 : _g.title }), h(DetailItem, { title: "Is Owner?", value: (_h = this.representative) === null || _h === void 0 ? void 0 : _h.is_owner.toString() }), h(DetailItem, { title: "Date Of Birth", value: this.representative && formatMediumDate(new Date(Number((_j = this.representative) === null || _j === void 0 ? void 0 : _j.dob_year), Number((_k = this.representative) === null || _k === void 0 ? void 0 : _k.dob_month) - 1, Number((_l = this.representative) === null || _l === void 0 ? void 0 : _l.dob_day))) }), h(DetailItem, { title: "Email", value: (_m = this.representative) === null || _m === void 0 ? void 0 : _m.email }), h(DetailItem, { title: "Phone", value: (_o = this.representative) === null || _o === void 0 ? void 0 : _o.phone }), h(DetailItem, { title: "Updated At", value: this.representative && formatMediumDate((_p = this.representative) === null || _p === void 0 ? void 0 : _p.updated_at) }))))));
     }
     static get is() { return "representative-details"; }
     static get properties() {

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

@@ -219,7 +219,7 @@ export class BusinessBankAccountFormStepCore {
         if (this.isLoading) {
             return h(PaymentProvisioningLoading, null);
         }
-        return (h("form", null, h("fieldset", { class: "mb-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Bank Account Info"), h("form-control-tooltip", { helpText: "This direct deposit account is the designated bank account where incoming funds will be deposited. The name of this account must match the registered business name exactly. We are not able to accept personal accounts unless your business is a registered sole proprietorship." })), h("hr", { class: "mt-2" }), h("bank-account-form-inputs", { defaultValue: bankAccountDefaultValue, errors: this.errors, inputHandler: this.inputHandler, formDisabled: this.existingBankAccount })), h("fieldset", { class: "mt-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Document Uploads"), h("form-control-tooltip", { helpText: "These documents are required for underwriting purposes. Various file formats such as PDF, DOC, DOCX, JPEG, and others are accepted. Multiple files can be uploaded for each document category." })), h("hr", { class: "mt-2" }), h("business-documents-on-file", { documents: this.existingDocuments, isLoading: this.isLoading }), h("bank-account-document-form-inputs", { inputHandler: this.inputHandler, errors: this.errors, storeFiles: this.storeFiles }))));
+        return (h("form", null, h("fieldset", { class: "mb-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Bank Account Info"), h("form-control-tooltip", { helpText: "This direct deposit account is the designated bank account where incoming funds will be deposited. The name of this account must match the registered business name exactly. We are not able to accept personal accounts unless your business is a registered sole proprietorship." })), h("hr", { class: "mt-2" }), h("bank-account-form-inputs", { defaultValue: bankAccountDefaultValue, errors: this.errors, inputHandler: this.inputHandler, formDisabled: this.existingBankAccount })), h("fieldset", { class: "mt-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Document Uploads"), h("form-control-tooltip", { helpText: "One document (voided check or bank statement) is required for underwriting purposes. It needs to visibly show the name tied to the account and the account number. Various file formats such as PDF, DOC, DOCX, JPEG are accepted. Multiple files can be uploaded for each document category." })), h("hr", { class: "mt-2" }), h("business-documents-on-file", { documents: this.existingDocuments, isLoading: this.isLoading }), h("bank-account-document-form-inputs", { inputHandler: this.inputHandler, errors: this.errors, storeFiles: this.storeFiles }))));
     }
     static get is() { return "justifi-business-bank-account-form-step-core"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/terms-and-conditions/business-terms-conditions-form-step.js

@@ -30,7 +30,7 @@ export class BusinessTermsConditionsFormStep {
             this.formLoading.emit(true);
             try {
                 const payload = this.termsPayload;
-                const response = await this.api.post({ endpoint: this.termsConditionsEndpoint, body: payload });
+                const response = await this.api.post({ endpoint: this.termsConditionsEndpoint, body: payload, authToken: this.authToken });
                 this.handleResponse(response, onSuccess);
             }
             catch (error) {
@@ -108,7 +108,7 @@ export class BusinessTermsConditionsFormStep {
         return (h("a", { href: "https://justifi.tech/merchant-agreement/", target: "_blank", rel: "noopener noreferrer" }, "merchant agreement"));
     }
     render() {
-        return (h("form", { key: '6bba766ba11512058470225103aa2afff318ab99' }, h("fieldset", { key: '318755ea4fc772e61ac9f8318ccf95494f71bf73' }, h("legend", { key: 'e5a268e9be8ed0a69eb8eed23ffc742228218685', part: heading2 }, "Terms and Conditions"), h("hr", { key: '100eed0ad0c8e7a5c652640c337d899be6f2131a' }), h("div", { key: '08a878a7fe9cd7b8ccb2217932d5d3a3b53bb0c9' }, h("p", { key: 'a5b3ddc655c511187327028229a893f7ea06c7ca' }, "Please read and accept the ", this.merchantAgreementLink, " to submit your provisioning request.")), h("br", { key: '5c021ef8a8bce686a615a7478a4312f842eb4248' }), h("div", { key: '6b3172972459d33e70e6bf4b8c2c9d93a843b7f4', class: "row-gy-3" }, h("div", { key: '1e99c4eab265b0b0f370a02ddf76b15d27db961c', class: "col-12" }, h("form-control-checkbox", { key: '4c974e3fd58f34000fa70d38d3da312f9bd1fe0d', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText, checked: this.acceptedTerms }))))));
+        return (h("form", { key: 'c1ca0ecd364a999e7525e9ac3da82e874a8784e8' }, h("fieldset", { key: 'a77178a38044c458d8dbd31a7e1aeb3f1a34c968' }, h("legend", { key: '7e933517fca8d54095466715bf1f0485625be74f', part: heading2 }, "Terms and Conditions"), h("hr", { key: '1c1da0b7378c51ad2be5efc0e51dedd3ed178c8f' }), h("div", { key: 'bc37aa5162dddc8ade4316b5f24deb1d4a4b6f86' }, h("p", { key: 'aef3d0c9186845e3f44b8e1906c405647f489b53' }, "Please read and accept the ", this.merchantAgreementLink, " to submit your provisioning request.")), h("br", { key: '2a6a480916cc0c4bf35d96c96c3f0250e87149cb' }), h("div", { key: '2e3bed3a57bcb026152fcdc82debab0e667f8148', class: "row-gy-3" }, h("div", { key: '3243c1819e4e61921421467271b2a4d2a89e73d4', class: "col-12" }, h("form-control-checkbox", { key: '20b9b72809148ef390a6da7d9f5bc216436d34a5', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText, checked: this.acceptedTerms }))))));
     }
     static get is() { return "justifi-business-terms-conditions-form-step"; }
     static get properties() {

package/dist/collection/components/business-forms/schemas/business-bank-account-schema.js

@@ -1,16 +1,44 @@
-import { object } from "yup";
-import { accountNumberValidation, accountTypeValidation, bankNameValidation, identityNameValidation, nicknameValidation, routingNumberValidation, voidedCheckValidation, bankStatementValidation } from "./schema-validations";
+import { object, mixed } from "yup";
+import { EntityDocumentType } from "../../../api/Document";
+import { accountNumberValidation, accountTypeValidation, bankNameValidation, identityNameValidation, nicknameValidation, routingNumberValidation } from "./schema-validations";
+const checkExistingDocs = (documents, documentType) => {
+    return documents.some((doc) => doc.document_type === documentType);
+};
+const documentErrorText = 'Please upload either a voided check or a bank statement. Only one is required.';
 export const businessBankAccountSchema = (documents, allowOptionalFields) => {
-    const schema = object({
+    const existingVoidedCheck = checkExistingDocs(documents, EntityDocumentType.voidedCheck);
+    const existingBankStatement = checkExistingDocs(documents, EntityDocumentType.bankStatement);
+    const existingDocument = existingVoidedCheck || existingBankStatement;
+    const schema = object().shape({
         bank_name: bankNameValidation.required('Enter bank name'),
         nickname: nicknameValidation.required('Enter nickname'),
         account_owner_name: identityNameValidation.required('Enter account owner name'),
         account_type: accountTypeValidation.required('Select account type'),
         account_number: accountNumberValidation.required('Enter account number'),
         routing_number: routingNumberValidation.required('Enter routing number'),
-        voided_check: voidedCheckValidation(documents, allowOptionalFields),
-        bank_statement: bankStatementValidation(documents, allowOptionalFields)
-    });
+        voided_check: mixed().when('bank_statement', {
+            is: (val) => {
+                return !val && !existingDocument;
+            },
+            then: (schema) => {
+                return schema.required(documentErrorText);
+            },
+            otherwise: (schema) => {
+                return schema.notRequired();
+            }
+        }),
+        bank_statement: mixed().when('voided_check', {
+            is: (val) => {
+                return !val && !existingDocument;
+            },
+            then: (schema) => {
+                return schema.required(documentErrorText);
+            },
+            otherwise: (schema) => {
+                return schema.notRequired();
+            }
+        }),
+    }, [['voided_check', 'bank_statement']]);
     const easySchema = object({
         bank_name: bankNameValidation.nullable(),
         nickname: nicknameValidation.nullable(),
@@ -18,8 +46,8 @@ export const businessBankAccountSchema = (documents, allowOptionalFields) => {
         account_type: accountTypeValidation.nullable(),
         account_number: accountNumberValidation.nullable(),
         routing_number: routingNumberValidation.nullable(),
-        voided_check: voidedCheckValidation(documents, allowOptionalFields),
-        bank_statement: bankStatementValidation(documents, allowOptionalFields)
+        voided_check: mixed().nullable(),
+        bank_statement: mixed().nullable(),
     });
     return allowOptionalFields ? easySchema : schema;
 };

package/dist/collection/components/business-forms/schemas/schema-validations.js

@@ -1,8 +1,7 @@
-import { mixed, string } from "yup";
+import { string } from "yup";
 import StateOptions from "../../../utils/state-options";
-import { businessServiceReceivedOptions, recurringPaymentsOptions, seasonalBusinessOptions, bankAccountTypeOptions, businessClassificationOptions } from "../utils/business-form-options";
-import { numbersOnlyRegex, phoneRegex, poBoxRegex, ssnRegex, transformEmptyString, urlRegex, validateRoutingNumber } from "./schema-helpers";
-import { EntityDocumentType } from "../../../api/Document";
+import { businessServiceReceivedOptions, recurringPaymentsOptions, seasonalBusinessOptions, bankAccountTypeOptions, businessClassificationOptions, } from "../utils/business-form-options";
+import { numbersOnlyRegex, phoneRegex, poBoxRegex, ssnRegex, transformEmptyString, urlRegex, validateRoutingNumber, } from "./schema-helpers";
 // Common Validations
 export const emailValidation = string()
     .email('Enter valid email')
@@ -55,7 +54,7 @@ export const identityTitleValidation = string()
     .max(50, 'Title must be less than 50 characters')
     .transform(transformEmptyString);
 export const dobValidation = (role) => {
-    return (string()
+    return string()
         .test('min', 'Enter a valid date', (value) => {
         const date = new Date(value);
         const minDate = new Date('1902-01-01');
@@ -67,7 +66,7 @@ export const dobValidation = (role) => {
         minAgeDate.setFullYear(minAgeDate.getFullYear() - 18);
         return date <= minAgeDate;
     })
-        .transform(transformEmptyString));
+        .transform(transformEmptyString);
 };
 export const ssnValidation = string()
     .matches(ssnRegex, 'Enter valid SSN')
@@ -102,7 +101,7 @@ export const cityValidation = string()
     .max(50, 'City must be less than 50 characters')
     .transform(transformEmptyString);
 export const stateValidation = string()
-    .oneOf(StateOptions.map((option) => option.value), 'Select state')
+    .oneOf(StateOptions.map((option) => option.value), 'Enter a 2-letter state abbreviation, such as CA')
     .transform(transformEmptyString);
 export const postalValidation = string()
     .matches(/^[0-9]{5}$/, 'Enter valid postal code')
@@ -130,8 +129,7 @@ export const recurringPaymentsPercentageValidation = string()
 export const seasonalBusinessValidation = string()
     .oneOf(seasonalBusinessOptions.map((option) => option.value), 'Select seasonal business')
     .transform(transformEmptyString);
-export const otherPaymentDetailsValidation = string()
-    .transform(transformEmptyString);
+export const otherPaymentDetailsValidation = string().transform(transformEmptyString);
 // Bank Account Validations
 export const bankNameValidation = string()
     .min(2, 'Name must be at least 2 characters')
@@ -162,48 +160,3 @@ export const routingNumberValidation = string()
     return validateRoutingNumber(value);
 })
     .transform(transformEmptyString);
-// Document Upload Validations
-const documentUploadValidation = mixed();
-export const ss4Validation = documentUploadValidation;
-export const governmentIdValidation = documentUploadValidation;
-export const otherDocumentValidation = documentUploadValidation;
-export const voidedCheckValidation = (documents, allowOptionalFields) => {
-    const existingDoc = documents.some((doc) => doc.document_type === EntityDocumentType.voidedCheck);
-    if (existingDoc || allowOptionalFields) {
-        return documentUploadValidation.nullable();
-    }
-    else {
-        return documentUploadValidation.required('Please select one or more files');
-    }
-};
-export const bankStatementValidation = (documents, allowOptionalFields) => {
-    const existingDoc = documents.some((doc) => doc.document_type === EntityDocumentType.bankStatement);
-    if (existingDoc || allowOptionalFields) {
-        return documentUploadValidation.nullable();
-    }
-    else {
-        return documentUploadValidation.required('Please select one or more files');
-    }
-};
-export const balanceSheetValidation = (volume, documents, allowOptionalFields) => {
-    const vol = parseInt(volume);
-    const balanceSheetRequiredAmount = 1000000;
-    const existingDoc = documents.some((doc) => doc.document_type === EntityDocumentType.balanceSheet);
-    if (existingDoc || allowOptionalFields) {
-        return documentUploadValidation.nullable();
-    }
-    else if (vol >= balanceSheetRequiredAmount && !allowOptionalFields) {
-        return documentUploadValidation.required('Please select one or more files');
-    }
-};
-export const profitAndLossStatementValidation = (volume, documents, allowOptionalFields) => {
-    const vol = parseInt(volume);
-    const profitLossRequiredAmount = 1000000;
-    const existingDoc = documents.some((doc) => doc.document_type === EntityDocumentType.profitAndLossStatement);
-    if (existingDoc || allowOptionalFields) {
-        return documentUploadValidation.nullable();
-    }
-    else if (vol >= profitLossRequiredAmount && !allowOptionalFields) {
-        return documentUploadValidation.required('Please select one or more files');
-    }
-};

package/dist/collection/components/checkout/billing-form/billing-form.js

@@ -35,13 +35,14 @@ export class BillingForm {
         this.formController.setInitialValues(fields);
     }
     async validate() {
-        let isValid = await this.formController.validate();
-        return { isValid: isValid };
+        const isValid = await this.formController.validate();
+        const errors = this.formController.errors.getValue();
+        return { isValid, errors };
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
         const showHeader = !this.isPostalOnlyMode && !this.hideAllBillingFields;
-        return (h(Host, { key: '0df4ecdee8c32874325b83dd79586c7449ce6d93' }, h("div", { key: '6d5b45f278a7c69a76fe0895036ab37b810d0262', part: billingForm, class: "mt-4", hidden: this.hideAllBillingFields }, showHeader && h(Header3, { key: 'bc8f57f42134859e28dd523500ef874101198076', text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", { key: '908b8265b028caaa01314bc56bdbfe550b632b94' }, h("fieldset", { key: 'af3e34fca100b0e0c3f13ef3af3a88009859e277' }, this.legend && h("legend", { key: '15cfcc98681d4386afad33d68910f7732e88b9a9' }, this.legend), h("div", { key: 'de372fbe06a6da1f512170a6f79f27c96499d790', class: "row gy-3" }, h("div", { key: 'bb4aab9d17a7bed7cb09e4306158f5e0ff248b8f', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-text", { key: 'f8e086504b6f3fac0e4bd2a0c0dee5e2f2c3328a', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '9a5105e1183a61c55639c8153a65169fb65998c5', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-text", { key: '4802e1462b0b1f433c77f817b733611332b18711', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: '3edf7b2390c2fa7d0cadd75f9102a63f88a3685b', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-text", { key: 'bec348d7030fa44e5a627ebc3f67ed9689a4a5b9', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: '066d141b9529aae210fc2585bd2fd386e5b82120', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-text", { key: '602587fcca0666d7070e5cd0316ed1c541953337', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: '125aeec26f292763abefe1c3a1a3070a2a8b4c7c', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-select", { key: 'fb8d46d217d452809ee199ef8640e93714a91e85', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: 'b622a69cb724ed15d2fe0fb2a9039635bc96a12e', class: "col-12", hidden: this.hideAllBillingFields }, h("form-control-text", { key: 'a094770db85d5a65524909b5c4ec532fca167a95', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
+        return (h(Host, { key: 'df86239c476aadde3af18742bbf643d61825c051' }, h("div", { key: '186f3ef6c2295223da888b7645a0af7aa8df4535', part: billingForm, class: "mt-4", hidden: this.hideAllBillingFields }, showHeader && h(Header3, { key: '72284e3fcea18cbdfe879989fb7f1b007e2a37df', text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", { key: '9479d696a0486e63edfad4bd0dbe374a21cb7b8c' }, h("fieldset", { key: 'b780abf09a714f2e9588670ad149c3ca999cbc87' }, this.legend && h("legend", { key: 'f102dc51722fe2f050c951e7b56117c9577f3b83' }, this.legend), h("div", { key: '00d6c7e35d768f3357cc17836c916e2bf24e3a7e', class: "row gy-3" }, h("div", { key: 'cb2b29aa769c97ccab246dc74e463d389497edbd', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-text", { key: '3cb8ca5e3ecd0817f8e16aafbb5d3ca5ee7824ed', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: '781338b1c79fd815d2ab2dbc15e7b56b534a2278', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-text", { key: '682a37c6b417fbc0edf76b89122b5bf618603360', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: '50d657891e492c8568bf179d752b9aadf10f2387', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-text", { key: 'ce1f04bfc3307af7a025390bcbcce6a6b3da6fab', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: 'ddb45c1cbdc6aa5d27c6a0c4b6f29366ed0e8eba', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-text", { key: '410efdbcd5381bdf61d9c752f292f794d8e12670', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: 'a65811acc25443a07cdb1401231ce1e703096fd4', class: "col-12", hidden: this.isPostalOnlyMode }, h("form-control-select", { key: 'bed28d564c9e5a2ebfc10b6ab47e43e2b17bd6e6', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: '8aca307d318e87b17e09122fa91e817c0a59c8d5', class: "col-12", hidden: this.hideAllBillingFields }, h("form-control-text", { key: '4dd06dc9ae01fc2953780e52f9e9c918a38a7bbd', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
     }
     static get is() { return "justifi-billing-form"; }
     static get properties() {
@@ -183,7 +184,7 @@ export class BillingForm {
             },
             "validate": {
                 "complexType": {
-                    "signature": "() => Promise<{ isValid: boolean; }>",
+                    "signature": "() => Promise<{ isValid: boolean; errors: any; }>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -191,7 +192,7 @@ export class BillingForm {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<{ isValid: boolean; }>"
+                    "return": "Promise<{ isValid: boolean; errors: any; }>"
                 },
                 "docs": {
                     "text": "",

package/dist/collection/components/checkout/new-payment-method.js

@@ -23,9 +23,18 @@ export class NewPaymentMethod {
         if (!this.paymentMethodFormRef || !this.billingFormRef)
             return;
         try {
-            const isValid = await this.validate();
+            const { isValid, errors } = await this.validate();
             if (!isValid || !insuranceValidation.isValid) {
-                return { validationError: true };
+                // get propety value from first property in errors object
+                const message = `${Object.values(errors)[0] || 'Validation error'}`;
+                return {
+                    validationError: true,
+                    error: {
+                        code: 'validation_error',
+                        message,
+                        decline_code: undefined
+                    }
+                };
             }
             const tokenizeResponse = await this.tokenize();
             if (tokenizeResponse.error) {
@@ -46,7 +55,9 @@ export class NewPaymentMethod {
     async validate() {
         const billingFormValidation = await this.billingFormRef.validate();
         const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
-        return billingFormValidation.isValid && paymentMethodFormValidation.isValid;
+        const isValid = billingFormValidation.isValid && paymentMethodFormValidation.isValid;
+        const errors = Object.assign(Object.assign({}, billingFormValidation.errors), paymentMethodFormValidation.errors);
+        return { isValid, errors };
     }
     async tokenize() {
         try {
@@ -76,7 +87,7 @@ export class NewPaymentMethod {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'b80791923e2276322ebe0ce3b25b2073beac188d', class: "payment-method" }, h("div", { key: '47dc555bc135d4562958cf371ca3c8b80ee7236d', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: 'e485347f39fa4b7d46d64e231931d6bdf541687c', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
+        return (h(Host, { key: '137378e62a729bd2287b1bdf89cb85c702cd4e12', class: "payment-method" }, h("div", { key: 'dabfcf5c56169708a8968a16aeaafefb43ca3ab8', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: 'd098e2b8f6e1230fc16fdc2cbfd616559bcf2b89', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: PaymentMethodTypeLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id] })), this.isSelected ? this.showNewPaymentMethodForm() : null));
     }
     static get is() { return "justifi-new-payment-method"; }
     static get properties() {
@@ -338,7 +349,7 @@ export class NewPaymentMethod {
             },
             "validate": {
                 "complexType": {
-                    "signature": "() => Promise<boolean>",
+                    "signature": "() => Promise<{ isValid: boolean; errors: any; }>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -346,7 +357,7 @@ export class NewPaymentMethod {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<boolean>"
+                    "return": "Promise<{ isValid: boolean; errors: any; }>"
                 },
                 "docs": {
                     "text": "",

package/dist/collection/components/checkout/payment-method-options.js

@@ -46,12 +46,11 @@ export class PaymentMethodOptions {
     }
     async validate() {
         const newPaymentMethodElement = this.selectedPaymentMethodOptionRef;
-        const isValid = await newPaymentMethodElement.validate();
-        return { isValid: isValid };
+        return newPaymentMethodElement.validate();
     }
     render() {
         var _a;
-        return (h(Host, { key: '506450161ed363330132c2bfa99a6a7729e94778' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (h(Host, { key: 'c61e82c72aaa25e87ded723799a1eb0961c05444' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
             const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
             const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
             const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;
@@ -402,7 +401,7 @@ export class PaymentMethodOptions {
             },
             "validate": {
                 "complexType": {
-                    "signature": "() => Promise<{ isValid: boolean; }>",
+                    "signature": "() => Promise<{ isValid: boolean; errors?: any; }>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -414,7 +413,7 @@ export class PaymentMethodOptions {
                             "id": "global::HTMLJustifiNewPaymentMethodElement"
                         }
                     },
-                    "return": "Promise<{ isValid: boolean; }>"
+                    "return": "Promise<{ isValid: boolean; errors?: any; }>"
                 },
                 "docs": {
                     "text": "",

package/dist/collection/components/tokenize-payment-method/tokenize-payment-method.js

@@ -49,11 +49,10 @@ export class TokenizePaymentMethod {
         this.paymentMethodOptionsRef.fillBillingForm(fields);
     }
     async validate() {
-        const { isValid } = await this.paymentMethodOptionsRef.validate();
-        return { isValid };
+        return this.paymentMethodOptionsRef.validate();
     }
     render() {
-        return (h(StyledHost, { key: 'd4dab6a0690a86229dd9b6e8bc39ea62cfa23300' }, h("form", { key: 'e2faa29095280fda65f14a4cb048c306578cf61e' }, h("fieldset", { key: '18b55da72957d26e3c3f44b9b2ef0c55d959e2ee' }, h("div", { key: '2d57f4b65361aadb7a0eed596a0595e24ef85930', class: "row gy-3" }, h("div", { key: 'd57acfc84d6af84c60636c6e7607a43926ead41f', class: "col-12" }, h("justifi-payment-method-options", { key: '1065a98d952820ba612376044c0c54fbb7ac0491', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: 'f50dd3f73048f7ca13a57bffe1ef6f2f33d091b0', class: "col-12" }, h(Button, { key: '1b13f82171d439bedaa0b6cc31d1593c2343a930', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText)))))));
+        return (h(StyledHost, { key: '9f12f7a83b2cb06c83694454ea5884bd7392eb83' }, h("form", { key: '0a0a4b4a049aa85863ef5c65313b89ebf58455c5' }, h("fieldset", { key: 'c35ed423483d49615f9ebe500fcef405394f4eb6' }, h("div", { key: '80419e9ca3431d9d75cffc958daab84a2c232f49', class: "row gy-3" }, h("div", { key: 'bd465d8b364c1bc46a6a3dee3fb74087bc087580', class: "col-12" }, h("justifi-payment-method-options", { key: 'c363e501622ef81c78a728ebbd15a3a4cd89867a', ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": false, paymentMethodGroupId: this.paymentMethodGroupId, "show-saved-payment-methods": false, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, authToken: this.authToken, "account-id": this.accountId })), h("div", { key: 'ad252991a12f6d21a012b6422ecaae13412f789b', class: "col-12" }, h(Button, { key: '4bb1dcdfeb71c21d3268c11fabd1ab92b43fca5e', variant: "primary", type: "submit", onClick: event => this.tokenizePaymentMethod(event), isLoading: this.isLoading, "data-testid": "submit-button", hidden: this.hideSubmitButton }, this.submitButtonText)))))));
     }
     static get is() { return "justifi-tokenize-payment-method"; }
     static get encapsulation() { return "shadow"; }
@@ -348,7 +347,7 @@ export class TokenizePaymentMethod {
             },
             "validate": {
                 "complexType": {
-                    "signature": "() => Promise<{ isValid: boolean; }>",
+                    "signature": "() => Promise<{ isValid: boolean; errors?: any; }>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -356,7 +355,7 @@ export class TokenizePaymentMethod {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<{ isValid: boolean; }>"
+                    "return": "Promise<{ isValid: boolean; errors?: any; }>"
                 },
                 "docs": {
                     "text": "",

package/dist/collection/ui-components/details/details.js

@@ -1,8 +1,8 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { ErrorState } from "./utils";
 export class Details {
     render() {
-        return (h(Host, { key: 'd00d3b1c3b5d73af5a0eb1a18f2095f023aeb816' }, this.errorMessage ?
+        return (h("div", { key: '3c1c4e729711c6676c176a5a04228ec7ebb7acfa' }, this.errorMessage ?
             ErrorState(this.errorMessage)
             :
                 h("main", { class: "p-2" }, h("slot", { name: "head-info" }), h("slot", { name: 'detail-sections' }))));

package/dist/collection/utils/utils.js

@@ -125,6 +125,9 @@ export function snakeToCamel(str) {
 }
 // Object Utilities
 export function isEmptyObject(obj) {
+    if (obj === null) {
+        return true;
+    }
     return Object.keys(obj).length === 0 && obj.constructor === Object;
 }
 export const isInRange = (num, min, max) => {