@justifi/webcomponents 6.13.0-rc.1 → 6.13.0

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

@@ -28,7 +28,7 @@ const strictSchemaCAN = () => object({
     line1: lineOneValidation.required('Enter street address'),
     line2: lineTwoValidation.nullable(),
     city: cityValidation.required('Enter city'),
-    state: string().required('Select province'),
+    state: string().required('Select province or state'),
     postal_code: makePostalValidation(CountryCode.CAN).required('Enter postal code'),
 });
 // Public API

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

@@ -1,11 +1,7 @@
-import { object, mixed, string } from "yup";
+import { object, string } from "yup";
 import { CountryCode } from "../../../utils/country-codes";
-import { EntityDocumentType } from "../../../api/Document";
 import { accountNumberValidation, accountTypeValidation, bankNameValidation, identityNameValidation, nicknameValidation, routingNumberValidation, } from "./schema-validations";
 import { numbersOnlyRegex } from "./schema-helpers";
-const checkExistingDocs = (documents, documentType) => {
-    return documents.some((doc) => doc.document_type === documentType);
-};
 const buildCommonFieldRules = (allowOptionalFields) => {
     if (allowOptionalFields) {
         return {
@@ -24,30 +20,6 @@ const buildCommonFieldRules = (allowOptionalFields) => {
         account_number: accountNumberValidation.required('Enter account number'),
     };
 };
-const buildDocumentRules = (documents, allowOptionalFields) => {
-    if (allowOptionalFields) {
-        return {
-            voided_check: mixed().nullable(),
-            bank_statement: mixed().nullable(),
-        };
-    }
-    const existingVoidedCheck = checkExistingDocs(documents, EntityDocumentType.voidedCheck);
-    const existingBankStatement = checkExistingDocs(documents, EntityDocumentType.bankStatement);
-    const existingDocument = existingVoidedCheck || existingBankStatement;
-    const documentErrorText = 'Please upload either a voided check or a bank statement. Only one is required.';
-    return {
-        voided_check: mixed().when('bank_statement', {
-            is: (val) => !val && !existingDocument,
-            then: (schema) => schema.required(documentErrorText),
-            otherwise: (schema) => schema.notRequired(),
-        }),
-        bank_statement: mixed().when('voided_check', {
-            is: (val) => !val && !existingDocument,
-            then: (schema) => schema.required(documentErrorText),
-            otherwise: (schema) => schema.notRequired(),
-        }),
-    };
-};
 const buildUSARules = (allowOptionalFields) => {
     if (allowOptionalFields) {
         return { routing_number: routingNumberValidation.nullable() };
@@ -72,17 +44,17 @@ const buildCANRules = (allowOptionalFields) => {
         transit_number: transitNumberValidation.required('Enter transit number'),
     };
 };
-export const businessBankAccountSchemaUSA = (documents, allowOptionalFields) => {
-    const shape = Object.assign(Object.assign(Object.assign({}, buildCommonFieldRules(allowOptionalFields)), buildUSARules(allowOptionalFields)), buildDocumentRules(documents, allowOptionalFields));
-    return object().shape(shape, [['voided_check', 'bank_statement']]);
+export const businessBankAccountSchemaUSA = (allowOptionalFields) => {
+    const shape = Object.assign(Object.assign({}, buildCommonFieldRules(allowOptionalFields)), buildUSARules(allowOptionalFields));
+    return object().shape(shape);
 };
-export const businessBankAccountSchemaCAN = (documents, allowOptionalFields) => {
-    const shape = Object.assign(Object.assign(Object.assign({}, buildCommonFieldRules(allowOptionalFields)), buildCANRules(allowOptionalFields)), buildDocumentRules(documents, allowOptionalFields));
-    return object().shape(shape, [['voided_check', 'bank_statement']]);
+export const businessBankAccountSchemaCAN = (allowOptionalFields) => {
+    const shape = Object.assign(Object.assign({}, buildCommonFieldRules(allowOptionalFields)), buildCANRules(allowOptionalFields));
+    return object().shape(shape);
 };
 // For backward compatibility, default to USA
-export const businessBankAccountSchema = (documents, allowOptionalFields) => businessBankAccountSchemaUSA(documents, allowOptionalFields);
+export const businessBankAccountSchema = (allowOptionalFields) => businessBankAccountSchemaUSA(allowOptionalFields);
 export const bankAccountSchemaByCountry = {
-    [CountryCode.USA]: (allowOptionalFields, documents = []) => businessBankAccountSchemaUSA(documents, allowOptionalFields),
-    [CountryCode.CAN]: (allowOptionalFields, documents = []) => businessBankAccountSchemaCAN(documents, allowOptionalFields),
+    [CountryCode.USA]: (allowOptionalFields) => businessBankAccountSchemaUSA(allowOptionalFields),
+    [CountryCode.CAN]: (allowOptionalFields) => businessBankAccountSchemaCAN(allowOptionalFields),
 };

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

@@ -42,7 +42,7 @@ export const businessCoreInfoSchemaCAN = (allowOptionalFields) => baseBusinessCo
     tax_id: makeTaxIdValidation(CountryCode.CAN)
         .when('tax_id_last4', {
         is: (val) => !val,
-        then: (schema) => schema.required(`Enter valid ${countryLabels.CAN.taxIdLabel} without dashes`),
+        then: (schema) => schema.notRequired().nullable(),
         otherwise: (schema) => schema.nullable(),
     }),
 }));

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

@@ -23,7 +23,9 @@ const strictSchemaUSA = (role) => object({
     ssn_last4: string().nullable(),
     // ssn required unless last4 provided (handled inside ssnValidation)
     identification_number: ssnValidation,
-    ownership_percentage: ownershipPercentageValidation.nullable(),
+    ownership_percentage: role === 'owner'
+        ? ownershipPercentageValidation.required('Enter ownership percentage')
+        : ownershipPercentageValidation.nullable(),
     address: addressSchemaUSA(false),
 });
 // Internal CAN schemas
@@ -45,8 +47,10 @@ const strictSchemaCAN = (role) => object({
     phone: phoneValidation.required('Enter phone number'),
     dob_full: dobValidation(role).required('Enter date of birth'),
     ssn_last4: string().nullable(),
-    identification_number: makeIdentityNumberValidation(CountryCode.CAN),
-    ownership_percentage: ownershipPercentageValidation.nullable(),
+    identification_number: makeIdentityNumberValidation(CountryCode.CAN).nullable(),
+    ownership_percentage: role === 'owner'
+        ? ownershipPercentageValidation.required('Enter ownership percentage')
+        : ownershipPercentageValidation.nullable(),
     address: addressSchemaCAN(false),
 });
 export const identitySchemaUSA = (role, allowOptionalFields) => allowOptionalFields ? schemaUSA(role) : strictSchemaUSA(role);

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

@@ -16,7 +16,7 @@ export const validateRoutingNumber = (routingNumber) => {
 };
 export const businessNameRegex = /^(?!^\s+$)[a-zA-Z0-9\s,&.-]*$/;
 export const phoneRegex = /^\d{10}$/;
-export const urlRegex = /^(?:http(s)?:\/\/)?(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$/;
+export const urlRegex = /^(?:http(s)?:\/\/)?(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)$/;
 export const stringLettersOnlyRegex = /^(?!^\s+$)[a-zA-Z\s]*$/;
 export const numbersOnlyRegex = /^\d+$/;
 export const ssnRegex = /^(?!000|666|9\d{2})\d{3}(?!00)\d{2}(?!0000)\d{4}$/;

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

@@ -1,5 +1,5 @@
 import { string } from "yup";
-import StateOptions from "../../../utils/state-options";
+import checkoutBillingStateOptions from "../../../utils/checkout-billing-state-options";
 import { CountryCode } from "../../../utils/country-codes";
 import { countryValidation } from "../utils/country-config";
 import { businessServiceReceivedOptions, bankAccountTypeOptions, } from "../utils/business-form-options";
@@ -46,11 +46,6 @@ export const makeIdentityNumberValidation = (country) => {
         return string()
             .matches(numbersOnlyRegex, 'Enter valid SIN')
             .length(countryValidation[country].identityDigits, 'Enter valid SIN')
-            .when('ssn_last4', {
-            is: (val) => !val || val.length === 0,
-            then: (schema) => schema.required('Enter SIN'),
-            otherwise: (schema) => schema.nullable(),
-        })
             .test('not-repeat', 'Enter valid SIN', (value) => {
             return !/^(\d)\1+$/.test(value);
         })
@@ -68,9 +63,13 @@ export const makeTaxIdValidation = (country) => {
             .matches(numbersOnlyRegex, 'Enter valid Business Number (BN)')
             .length(countryValidation[country].taxIdDigits, 'Enter valid Business Number (BN)')
             .test('not-repeat', 'Enter valid Business Number (BN)', (value) => {
+            if (!value)
+                return true;
             return !/^(\d)\1+$/.test(value);
         })
             .test('not-seq', 'Enter valid Business Number (BN)', (value) => {
+            if (!value)
+                return true;
             return value !== '123456789';
         })
             .transform(transformEmptyString);
@@ -158,7 +157,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), 'Enter a 2-letter state abbreviation, such as CA')
+    .oneOf(checkoutBillingStateOptions.map((option) => option.value), 'Select a valid state or province')
     .transform(transformEmptyString);
 export const postalValidation = string()
     .matches(/^((\d{5}-\d{4})|(\d{5})|([A-Z]\d[A-Z]\s\d[A-Z]\d))$/, 'Enter valid postal code')
@@ -198,9 +197,13 @@ export const routingNumberValidation = string()
     .length(9, 'Routing number must be 9 digits')
     .matches(numbersOnlyRegex, 'Enter valid routing number')
     .test('not-repeat', 'Enter valid routing number', (value) => {
+    if (!value)
+        return true;
     return !/^(\d)\1+$/.test(value);
 })
     .test('valid', 'Enter valid routing number', (value) => {
+    if (!value)
+        return true;
     return validateRoutingNumber(value);
 })
     .transform(transformEmptyString);

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

@@ -75,6 +75,56 @@ export const seasonalBusinessOptions = [
         value: 'No',
     }
 ];
+export const businessTitleOptions = [
+    {
+        label: 'Choose title',
+        value: '',
+    },
+    {
+        label: 'Vice President',
+        value: 'Vice President',
+    },
+    {
+        label: 'President',
+        value: 'President',
+    },
+    {
+        label: 'Treasurer',
+        value: 'Treasurer',
+    },
+    {
+        label: 'Owner',
+        value: 'Owner',
+    },
+    {
+        label: 'Partner',
+        value: 'Partner',
+    },
+    {
+        label: 'CEO',
+        value: 'CEO',
+    },
+    {
+        label: 'Member LLC',
+        value: 'Member LLC',
+    },
+    {
+        label: 'Secretary',
+        value: 'Secretary',
+    },
+    {
+        label: 'Director',
+        value: 'Director',
+    },
+    {
+        label: 'COO',
+        value: 'COO',
+    },
+    {
+        label: 'CFO',
+        value: 'CFO',
+    },
+];
 export const bankAccountTypeOptions = [
     {
         label: 'Checking',

package/dist/collection/components/business-forms/utils/country-config.js

@@ -9,24 +9,31 @@ export const countryLabels = {
         idNumberLabelOptional: 'SSN (optional)',
         identityHelpText: 'Enter your full Social Security Number. It is required for Federal OFAC check.',
         taxIdLabel: 'Tax ID (EIN or SSN)',
+        taxIdLabelOptional: '',
         taxIdHelpText: "Employer Identification Numbers (EINs) are nine digits. The federal tax identification number/EIN issued to you by the IRS. It can be found on your tax returns. Enter value without dashes.",
     },
     CAN: {
-        stateLabel: 'Province',
-        postalLabel: 'Postal Code',
+        stateLabel: 'Province / State',
+        postalLabel: 'Postal / Zip Code',
         idNumberLabel: 'SIN',
         idNumberLabelOptional: 'SIN (optional)',
         identityHelpText: 'Enter your full Social Insurance Number.',
         taxIdLabel: 'Business Number (BN)',
+        taxIdLabelOptional: 'Business Number (BN) (optional)',
         taxIdHelpText: 'Business Numbers (BN) are nine digits. Enter value without spaces or dashes.',
     },
 };
+const provinceAndStateOptions = [
+    { label: 'Choose province / state', value: '' },
+    ...ProvinceOptions.filter(o => o.value !== ''),
+    ...StateOptions.filter(o => o.value !== ''),
+];
 export const countryOptions = {
     USA: {
         stateOptions: StateOptions,
     },
     CAN: {
-        stateOptions: ProvinceOptions,
+        stateOptions: provinceAndStateOptions,
     },
 };
 export const countryValidation = {
@@ -36,7 +43,7 @@ export const countryValidation = {
         taxIdDigits: 9,
     },
     CAN: {
-        postalRegex: /^[A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d$/,
+        postalRegex: /^([A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d|[0-9]{5}(-[0-9]{4})?)$/,
         identityDigits: 9,
         taxIdDigits: 9,
     },

package/dist/collection/components/checkout/bank-account-form/bank-account-form.js

@@ -3,9 +3,11 @@ import BankAccountFormSkeleton from "./bank-account-form-skeleton";
 import { configState, waitForConfig } from "../../config-provider/config-state";
 import { generateTabId } from "../../../utils/utils";
 import { checkPkgVersion } from "../../../utils/check-pkg-version";
+import { checkoutStore } from "../../../store/checkout.store";
 export class BankAccountForm {
     constructor() {
         this.isReady = false;
+        this.hasLoggedAchDisabledWarning = false;
     }
     async componentWillLoad() {
         await waitForConfig();
@@ -14,10 +16,16 @@ export class BankAccountForm {
         checkPkgVersion();
     }
     componentDidRender() {
+        if (this.isAchDisabledForCheckout()) {
+            return;
+        }
         const elements = [
             this.accountNumberIframeElement,
             this.routingNumberIframeElement,
         ];
+        if (!elements.every(Boolean)) {
+            return;
+        }
         Promise.all(elements.map((element) => {
             return new Promise((resolve) => {
                 element.addEventListener('iframeLoaded', () => { resolve(); });
@@ -26,20 +34,40 @@ export class BankAccountForm {
             this.isReady = true;
         });
     }
+    isAchDisabledForCheckout() {
+        return (checkoutStore.checkoutLoaded && !checkoutStore.achPaymentsEnabled);
+    }
     async validate() {
+        if (this.isAchDisabledForCheckout()) {
+            return false;
+        }
         const accountNumberIsValid = await this.accountNumberIframeElement.validate();
         const routingNumberIsValid = await this.routingNumberIframeElement.validate();
         return accountNumberIsValid && routingNumberIsValid;
     }
     async tokenize({ clientId, paymentMethodMetadata, account }) {
+        if (this.isAchDisabledForCheckout()) {
+            return {
+                error: {
+                    message: 'ACH payments are disabled for this checkout (payment_settings.ach_payments=false).',
+                },
+            };
+        }
         const result = await this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
         return result;
     }
     render() {
-        return (h("div", { key: '85e116539bb4721484d9877706ff93de1a68ec59' }, h(BankAccountFormSkeleton, { key: 'b12a13d02b004e2957a55eb00fb38178dc283a92', isReady: this.isReady }), h("hidden-input", { key: '657ed7946158788e9291906ec0966eb3bd3c544c' }), h("div", { key: '321fddef9af616686d525af94dc4a65b5a4c18e6', class: "container-fluid p-0", style: {
+        if (this.isAchDisabledForCheckout()) {
+            if (!this.hasLoggedAchDisabledWarning) {
+                console.warn('[bank-account-form] ACH payments are disabled for this checkout (payment_settings.ach_payments=false).');
+                this.hasLoggedAchDisabledWarning = true;
+            }
+            return null;
+        }
+        return (h("div", null, h(BankAccountFormSkeleton, { isReady: this.isReady }), h("hidden-input", null), h("div", { class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'cee2dcc5bf8032ca95dc6b46e6a2bb47b371986b', class: "row mb-3" }, h("iframe-input", { key: '50dfad1fc1eb41a87f2964e80d39036da1fc89ce', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { key: 'bd47ac6ff7c687ce9eb7e6ea2a66628392f73cdc', class: "row" }, h("iframe-input", { key: 'bbe98adda61bc72925e77714139b604d2959e156', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
+            } }, h("div", { class: "row mb-3" }, h("iframe-input", { inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber?tabId=${this.tabId}` })), h("div", { class: "row" }, h("iframe-input", { inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber?tabId=${this.tabId}` })))));
     }
     static get is() { return "bank-account-form"; }
     static get states() {

package/dist/collection/components/checkout/billing-form/bank-account-billing-form-simple.js

@@ -40,7 +40,7 @@ export class BankAccountBillingFormSimple {
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h("div", { key: 'aad27826f1ad84e4f4f7ccb6199d7bd64dde61fc', part: billingForm, class: "mt-4" }, h("form", { key: '208146fcf8c96dc78d3ede31178df8fabada001f' }, h("fieldset", { key: 'ba7b72b8a49b7c0720a449f71fd8a675093e52c3' }, this.legend && (h("legend", { key: 'ed0d19198e69ae3fa043411f08b1c333cee11329' }, this.legend)), h("div", { key: '3941aaf9b5abac0b5fe8a72aaebeec448bacb49b', class: "row gy-3" }, h("div", { key: '6f9cb3621fdf2519e2167f4407ba0e3322c64c52', class: "col-12" }, h("form-control-text", { key: 'a7cf909f36506826f112f189cd9409d05a535da0', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })))))));
+        return (h("div", { key: 'e8c53c98793d0296d69799c8449d762084d9859b', part: billingForm, class: "mt-4" }, h("form", { key: '83e59bb7bdcf4a3e0b4ed4320358796eae91726f' }, h("fieldset", { key: 'd92a4a02c531a08a270562701bc71440add5b545' }, this.legend && (h("legend", { key: '74ac1eb2c6fc629323f31be515e3aa204ae302a2' }, this.legend)), h("div", { key: '161888eb0680a4c9d6280440961f2926b08ac1ed', class: "row gy-3" }, h("div", { key: '9f6c899b7a4ff25a5eba5278bffe7d4e86eb00df', class: "col-12" }, h("form-control-text", { key: '74a9958fb74de730067fe4d87dfac33c12522169', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })))))));
     }
     static get is() { return "bank-account-billing-form-simple"; }
     static get properties() {

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

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { fullBillingSchema } from "./billing-form-schema";
 import { billingForm } from "../../../styles/parts";
 import { Header3 } from "../../../ui-components";
-import StateOptions from "../../../utils/state-options";
+import checkoutBillingStateOptions from "../../../utils/checkout-billing-state-options";
 import { FormController } from "../../../ui-components/form/form";
 import { checkoutStore, onChange } from "../../../store/checkout.store";
 export class BillingFormFull {
@@ -45,7 +45,7 @@ export class BillingFormFull {
             return null;
         }
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h("div", { part: billingForm, class: "mt-4" }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", null, h("fieldset", null, this.legend && (h("legend", null, this.legend)), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-select", { name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_postal_code', label: "Postal Code", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 7 })))))));
+        return (h("div", { part: billingForm, class: "mt-4" }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", null, h("fieldset", null, this.legend && (h("legend", null, this.legend)), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-select", { name: 'address_state', label: 'State / Province', options: checkoutBillingStateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_postal_code', label: "Postal Code", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 7 })))))));
     }
     static get is() { return "billing-form-full"; }
     static get properties() {

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

@@ -5,7 +5,7 @@ export const fullBillingSchema = () => object({
     address_line1: lineOneValidation.required('Enter street address'),
     address_line2: lineTwoValidation.nullable(),
     address_city: cityValidation.required('Enter city'),
-    address_state: stateValidation.required('Select state'),
+    address_state: stateValidation.required('Select state or province'),
     address_postal_code: postalValidation.required('Enter postal code'),
 });
 export const postalOnlySchema = () => object({

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

@@ -40,7 +40,7 @@ export class CardBillingFormSimple {
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (h("div", { key: 'c067c5a1aab63baa994322346b7cc3d71fca5157', part: billingForm }, h("form", { key: '72a74580a254d4c940579e0c5fa781e00a6a80d6' }, h("fieldset", { key: '6beea66d6a8c863e228aafbd9e7ff78f5e19b033' }, this.legend && (h("legend", { key: 'ba5bb1b6b8d703898424113e5787a0ffb7f534af' }, this.legend)), h("div", { key: 'cc3bc3446e475822c45d2ae261cdfb755e6313db', class: "row gy-3" }, h("div", { key: '5dd21759753d2a5378d6dcc0b3b7ffb436c052db', class: "col-12" }, h("form-control-text", { key: '033d5598a3ba198712189597ed1d1efe0dc09802', name: 'address_postal_code', label: "Postal Code", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 7 })))))));
+        return (h("div", { key: '41a7f26e12bfa3da4e7926d8a535218a0580be14', part: billingForm }, h("form", { key: 'b48cf148ec6d16fd8e5859dfe96a3b9fd6d3036d' }, h("fieldset", { key: '88094544642af8fadb270dfafd838d450ad88cdd' }, this.legend && (h("legend", { key: '13c19557aa4c0c127305cc54f6346eeb74d4f750' }, this.legend)), h("div", { key: 'bbcf1a622720df2d21db718eaf823e4e33155070', class: "row gy-3" }, h("div", { key: '96b9d590fd68fd4f2a54760e58c0f2bc166a832b', class: "col-12" }, h("form-control-text", { key: '57050d0274782cb2ff5f1a9b13726a8319438a36', name: 'address_postal_code', label: "Postal Code", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 7 })))))));
     }
     static get is() { return "card-billing-form-simple"; }
     static get properties() {

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

@@ -10,7 +10,7 @@ export class JustifiBillingForm {
         return (_b = (_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.validate()) !== null && _b !== void 0 ? _b : { isValid: false, errors: {} };
     }
     render() {
-        return (h(StyledHost, { key: '8b814bc4f24e7e890f3c67723fdb8fe0401f00c0' }, h("billing-form", { key: '535a0c3bd061c4d90bf1060a060bdadb1fe8796f', legend: this.legend, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: this.paymentMethodType, ref: (el) => (this.billingFormRef = el) })));
+        return (h(StyledHost, { key: '40a8a4342204d1679c9b37fb775184131c68248b' }, h("billing-form", { key: '65156fc636a2196aa2d189ce5c4d66f755deb3f6', legend: this.legend, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: this.paymentMethodType, ref: (el) => (this.billingFormRef = el) })));
     }
     static get is() { return "justifi-billing-form"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,10 +40,10 @@ export class CardForm {
         return result;
     }
     render() {
-        return (h("div", { key: 'cef558344c088e6e0bccb49b99c8a47c76200467' }, h(CardFormSkeleton, { key: 'f35bad214bc4d7657b7ab8a097a76602df877bcf', isReady: this.isReady }), h("hidden-input", { key: 'd3791651ad279e2e0ad169012f4d066a44bbfa66' }), h("div", { key: '37318e633f9ab08bfbc95750466c054158e5e4ff', class: "container-fluid p-0", style: {
+        return (h("div", { key: 'd3cb1fca6595f60e5f5f122b73d3d6c11a826423' }, h(CardFormSkeleton, { key: 'f83dcbbc214d460bb21c015ec051436ed5cf6670', isReady: this.isReady }), h("hidden-input", { key: '5fad0d06303d0ddb55c30c2cd94014255f2a8cec' }), h("div", { key: '68440756a1aad69b5c95245e7a2a5feb16899dca', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'd5eccc9c8a496f3f264a1bd01bb065e823aa01b5', class: "mb-3" }, h("iframe-input", { key: '2ec07c9bf1ea18ed354cd036e2c7876f974a30ed', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '2959894ab0721d9bffccb0c16ecfb71bd3488518', class: "row" }, h("div", { key: 'dea7afd2515c4faa4927fd6cb32678fc782b9b5a', class: "col-4 align-content-end" }, h("iframe-input", { key: '7d95eff6c6765ff996c1c497866ad01216b2cc4f', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: '00b02deefe877431409ef584662fc07e4a20cc3c', class: "col-4 align-content-end" }, h("iframe-input", { key: '4860f042f29eb1d3db0e5ad4cb7c9471b8536ce6', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: 'c69f9be6e581e683b757e89000ef1ba385c5f57b', class: "col-4 align-content-end" }, h("iframe-input", { key: 'e5fbb8e78af5c8c6ed74db18aeb226bfba5d083f', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
+            } }, h("div", { key: 'b39eab56c79463935f1a1bb15cc867997f026e7b', class: "mb-3" }, h("iframe-input", { key: '25a2390a8c3c92d5e6eceafe6b821202ecb22d76', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '68766798d954a0b3d093ae13c3c2955f819da4f2', class: "row" }, h("div", { key: '05539f1ac8ebb0397574d55b4b76d7acdb7d2dca', class: "col-4 align-content-end" }, h("iframe-input", { key: '4c437a4384e6c301e18824d799784c1133e70ee3', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: 'b9a5b8b5dda1d8ab6305c9dc1ef9b655eb02fb3d', class: "col-4 align-content-end" }, h("iframe-input", { key: 'c1a412c20e75d21c1084a4b93f22362c367c1907', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: 'abdfdbd7eb784871011397a7c5fdf371e3c6baf0', class: "col-4 align-content-end" }, h("iframe-input", { key: '08dff072e785846d7543018c194b4df6ce5b343e', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
     }
     static get is() { return "card-form"; }
     static get states() {

package/dist/collection/components/checkout/justifi-checkout.js

@@ -71,9 +71,9 @@ export class JustifiCheckout {
     }
     render() {
         var _a, _b;
-        return (h(StyledHost, { key: 'ffd2abaacc7edae588a9abe3a4ff96807b34fcff' }, h("justifi-modular-checkout", { key: '9196c278e24353aeb1ac02c85253d629f683522b', ref: (el) => {
+        return (h(StyledHost, { key: 'bc8428227b2fc0e0753c4ef4e2370cd34bd34e82' }, h("justifi-modular-checkout", { key: '9fda18728d6fb5b20716070cefc2fcf8ef097459', ref: (el) => {
                 this.modularCheckoutRef = el;
-            }, authToken: this.authToken, checkoutId: this.checkoutId, preCompleteHook: this.preCompleteHook }, h("div", { key: '895298286bc0aa6acbda896a4f148dd4f8d7e7d2', class: "row gy-3 jfi-checkout-core" }, h("div", { key: 'dd186ed2f0fd479cd60024423b6d55625b962e55', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '920d4eca26846aa1cbc16693fa45a9d8054d95a7', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '560f8c3757a7cf53fd0aa898fd243b16a2f8e8d5' }, h("justifi-checkout-summary", { key: '31faa6ca984aa22985927a1f80273c86a67c7025' }))), h("div", { key: '3128ae40a739573da32598213a289d8751503fb0', class: "col-12 mt-4" }, h("slot", { key: '4a310881bbc4017734082d5c4f6b41d3d5f2a424', name: "insurance" })), h("div", { key: '8047c4da62e2fd67bd0b3f8654c6a19c0cacc255', class: "col-12 mt-4" }, h("justifi-header", { key: '631ff14201f6246906e3e1572515de21a7977773', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: '7fdc560ef42a5c2e8571f332e3c4ce8ff460d235', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '81dcb52c051044adb4dbd92ac73ee3096edc592b', class: "d-flex flex-column" }, h("section", { key: '4359903b195009a2e8fb997a1f77880cba40dea4' }, h("div", { key: '21728867e6288c3fb7d5e5a6ee3d15974568b866' }, this.availablePaymentMethods.includes(PAYMENT_METHODS.APPLE_PAY) && (h("div", { key: 'bdaa6b6c6d09cba294b2e46b85270241c86d2251', class: "mb-3" }, h("justifi-apple-pay", { key: '150d707bff7b79a1d19141f21a9c47e00e54418a' }))), this.availablePaymentMethods.includes(PAYMENT_METHODS.GOOGLE_PAY) && (h("div", { key: 'ce2be06b20a1e7d0159fde68a1c5c349c2d11998', class: "mb-3" }, h("justifi-google-pay", { key: '0fc867ce77467eb1f1fd198a62e88bd2795f4914', ref: (el) => (this.googlePayRef = el) }))), h("justifi-saved-payment-methods", { key: '0bb1999c093b3837bfdb879134dc54f66c90e164' }), this.availablePaymentMethods.includes(PAYMENT_METHODS.SEZZLE) && (h("justifi-radio-list-item", { key: '1599be9bcea7569d822a204c805f08f18a4e00a4', name: "paymentMethodType", value: PAYMENT_METHODS.SEZZLE, checked: ((_a = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.SEZZLE, label: h("justifi-sezzle-payment-method", { ref: (el) => (this.sezzlePaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.sezzlePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), this.availablePaymentMethods.includes(PAYMENT_METHODS.PLAID) && !this.disableBnpl && (h("justifi-radio-list-item", { key: 'c1de230257d290efa05f7a7166c2f069451c71a3', name: "paymentMethodType", value: PAYMENT_METHODS.PLAID, checked: ((_b = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _b === void 0 ? void 0 : _b.type) === PAYMENT_METHODS.PLAID, label: h("justifi-plaid-payment-method", { ref: (el) => (this.plaidPaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.plaidPaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), h("justifi-tokenize-payment-method", { key: '44bca4ee57857afd4eee213cef98db2d4bd42490', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: 'e5b6b4ac6b0fcec20380082f1b4cc5ba73bb88aa', class: "mt-4" }, h("justifi-button", { key: '188a8f46fd37b5f4f2d9b3ba7ff179d44d4a6656', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: checkoutStore.isSubmitting || checkoutStore.isWalletProcessing, isLoading: checkoutStore.isSubmitting || checkoutStore.isWalletProcessing, customStyle: { width: '100%', textAlign: "center" } }))))));
+            }, authToken: this.authToken, checkoutId: this.checkoutId, preCompleteHook: this.preCompleteHook }, h("div", { key: 'e39f9871696d44cea2080198c7b91d03b706f2fd', class: "row gy-3 jfi-checkout-core" }, h("div", { key: 'df6045e9394b10f9b3e4b86e1a2242db30cc9b7b', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '8f4332bd43371106faf4e264fd5b27c97cb589aa', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: 'a7170276f18b9fa4b085c4d5de35979d55935929' }, h("justifi-checkout-summary", { key: '109aceb53ad2500e927230b3f82bbb07ab3f604c' }))), h("div", { key: '902e040bbd591408c9d292a592ca4d31fc838d85', class: "col-12 mt-4" }, h("slot", { key: '2677cb4952d88a8ce8f0198b96ed2638d4f4e6eb', name: "insurance" })), h("div", { key: '32c033bba12a7b7bf26159bd1878d6fa4ed913d9', class: "col-12 mt-4" }, h("justifi-header", { key: '74543b63c1b94a5200ad36236818fce7345d5d76', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: '8e7c56c75bb779211b72c0b8561df8283b731ca1', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: 'c2b0a875169b46dcd7d73428e3f1a4825b380ce5', class: "d-flex flex-column" }, h("section", { key: 'c5f007674c058e88d271c17f0b6b9c959bd0e044' }, h("div", { key: '2c4ecdd0f8708f9f80bae50362ba7fab295f788f' }, this.availablePaymentMethods.includes(PAYMENT_METHODS.APPLE_PAY) && (h("div", { key: '5ac363a3b7c38cb3f10e9c2c7916825f0f5dc2d8', class: "mb-3" }, h("justifi-apple-pay", { key: '498c03630e4057b54ebd12a3cd87b6b6bdb00c4b' }))), this.availablePaymentMethods.includes(PAYMENT_METHODS.GOOGLE_PAY) && (h("div", { key: '8c8114d142927739a3217d3a0a44c34c89e58f83', class: "mb-3" }, h("justifi-google-pay", Object.assign({ key: 'a2fbc5b99a83fbc52698422d2f57a3380f97733f', ref: (el) => (this.googlePayRef = el) }, (this.googlePayEnv != null ? { environment: this.googlePayEnv } : {}))))), h("justifi-saved-payment-methods", { key: '2e5b27eea7ef433e950feadae0b0a07f8b613533' }), this.availablePaymentMethods.includes(PAYMENT_METHODS.SEZZLE) && (h("justifi-radio-list-item", { key: 'fb1501c51eaf836579547bc50c295ebb67cb09c1', name: "paymentMethodType", value: PAYMENT_METHODS.SEZZLE, checked: ((_a = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _a === void 0 ? void 0 : _a.type) === PAYMENT_METHODS.SEZZLE, label: h("justifi-sezzle-payment-method", { ref: (el) => (this.sezzlePaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.sezzlePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), this.availablePaymentMethods.includes(PAYMENT_METHODS.PLAID) && !this.disableBnpl && (h("justifi-radio-list-item", { key: '49e0687b4955fb92935783250540fe38350bbdcc', name: "paymentMethodType", value: PAYMENT_METHODS.PLAID, checked: ((_b = checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.selectedPaymentMethod) === null || _b === void 0 ? void 0 : _b.type) === PAYMENT_METHODS.PLAID, label: h("justifi-plaid-payment-method", { ref: (el) => (this.plaidPaymentMethodRef = el) }), "onRadio-click": () => { var _a; (_a = this.plaidPaymentMethodRef) === null || _a === void 0 ? void 0 : _a.handleSelectionClick(); } })), h("justifi-tokenize-payment-method", { key: 'ba793274de073c8a60c063e9caedcf32780b4bbf', ref: (el) => (this.tokenizePaymentMethodRef = el), authToken: this.authToken, accountId: checkoutStore.accountId, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, hideSubmitButton: true, paymentMethodGroupId: checkoutStore.paymentMethodGroupId }))))), h("div", { key: 'ed7be422c4e369382fd42e0b0162357df7de2031', class: "mt-4" }, h("justifi-button", { key: '849d648feec5ce805d6eb87acacf94d62e7a8f1b', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: checkoutStore.isSubmitting || checkoutStore.isWalletProcessing, isLoading: checkoutStore.isSubmitting || checkoutStore.isWalletProcessing, customStyle: { width: '100%', textAlign: "center" } }))))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
@@ -236,6 +236,25 @@ export class JustifiCheckout {
                 "attribute": "hide-card-billing-form",
                 "defaultValue": "false"
             },
+            "googlePayEnv": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'TEST' | 'PRODUCTION'",
+                    "resolved": "\"PRODUCTION\" | \"TEST\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to `justifi-google-pay` as `environment`. Omit to let the child use its default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "google-pay-env"
+            },
             "preCompleteHook": {
                 "type": "unknown",
                 "mutable": false,

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

@@ -5,7 +5,7 @@ export class JustifiSaveNewPaymentMethod {
         this.label = 'Save New Payment Method';
     }
     render() {
-        return (h(StyledHost, { key: 'b3a21f76759593ab02d71ed9a708982bdad5f0c3' }, h("save-new-payment-method", { key: 'ce0aa2bb711293144c835e9779b39a122017b544', label: this.label, hidden: this.hidden, onCheckboxChanged: (e) => this.checkboxChanged.emit(e.detail) })));
+        return (h(StyledHost, { key: '58ca6f98ace8aba5658fa38215b0c0756907ce9f' }, h("save-new-payment-method", { key: '6bfd3950c0bdf26bca6866ebf1b155ac39466516', label: this.label, hidden: this.hidden, onCheckboxChanged: (e) => this.checkboxChanged.emit(e.detail) })));
     }
     static get is() { return "justifi-save-new-payment-method"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,7 +11,7 @@ export class SaveNewPaymentMethod {
         };
     }
     render() {
-        return (h(Host, { key: '42c0674b7d12f57ace0088c2ebb854521fed2abf', hidden: this.hidden }, h("form-control-checkbox", { key: 'c198bdd860f5c844bca6141e8d5c0bcf4de1fbec', label: this.label || 'Save New Payment Method', name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
+        return (h(Host, { key: 'a5ecfa60f9f55bdb91343394c1dd5bea542c20ed', hidden: this.hidden }, h("form-control-checkbox", { key: '282476dea11415eeec68336577ff17a5c03baad2', label: this.label || 'Save New Payment Method', name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
     }
     static get is() { return "save-new-payment-method"; }
     static get properties() {

package/dist/collection/components/checkouts-list/checkouts-list-filters.js

@@ -51,8 +51,8 @@ export class JustifiCheckoutsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '1bb72de3ffad74d0e287f6f988f2737a94190709' }, h("table-filters-menu", { key: 'e7e1c2d657b5af5dfcf6e13b262dbd3787583206', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: 'df26c6a8c7ec477103995c07c079c01a4bea0729', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '6fd0f286cb30997439879d1c9b69b8ab39651a99', class: "p-2" }, h("form-control-text", { key: 'b6a070c40b1da5ea9f59c8c6f47f517181948230', name: "checkout_id", label: "Checkout ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.checkoutId || filterParams.checkout_id, disabled: !!this.checkoutId, part: filterParam })), h("div", { key: 'f6ae07ac4b9afcb307fa6ce5ff6a0b6610169a69', class: "p-2" }, h("form-control-text", { key: 'c27c86b9a14d806bcd6d2d2a070812e31ae558ee', name: "successful_payment_id", label: "Successful Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.successfulPaymentId || filterParams.successful_payment_id, disabled: !!this.successfulPaymentId, part: filterParam })), h("div", { key: '54b26c583902c853db8709b311870c94d5332bd2', class: "p-2" }, h("form-control-select", { key: '3747bd2c6f2196a56059f36febc30057b8dc13de', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status || '', disabled: !!this.checkoutStatus, part: filterParam })), h("div", { key: '5a875750872d5446c42db9a840c3670425c46ebb', class: "p-2" }, h("form-control-select", { key: '58eff7fbca6653532540506c7cef66df0f54af38', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode || '', disabled: !!this.paymentMode, part: filterParam })), h("div", { key: 'dca10b3b14055c6c2351f4fa8f11b609625f1a26', class: "p-2" }, h("form-control-date", { key: 'bfb85e61a9ee01a1cb3c2907ad06b6d37bbdc081', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: filterParam })), h("div", { key: '1772c182c957b053e77599935e3d61c1a66186a6', class: "p-2" }, h("form-control-date", { key: 'f7965bd4b2689359e76d3cec250bfd7eb5ba7870', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: '1c4b39ee0103e6905affa774f202dd76f147bc89' }, h("table-filters-menu", { key: '9cb0457d0e6ce05925f4e0da04532008020dd46e', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: 'e5c370717e3cf2571f2017d185c7f3ea08eab1c8', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '2e3c1832bb800fa9065b189a299234fafa7eb4e3', class: "p-2" }, h("form-control-text", { key: '33e1e31d842aa0b8c47e3ea1bc12cc860691f5e3', name: "checkout_id", label: "Checkout ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.checkoutId || filterParams.checkout_id, disabled: !!this.checkoutId, part: filterParam })), h("div", { key: '4dcfe2f56d8405f376eb4aa52deaea0fb64e8ff5', class: "p-2" }, h("form-control-text", { key: '272ba42827048aa45ada6090eaf9574950ebaca2', name: "successful_payment_id", label: "Successful Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.successfulPaymentId || filterParams.successful_payment_id, disabled: !!this.successfulPaymentId, part: filterParam })), h("div", { key: '7c4e0ad12e0031a70aeaec5a0423d9b0b45c70a4', class: "p-2" }, h("form-control-select", { key: '87775c3a0d1de63301dde682f79a7c2c11a4958b', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status || '', disabled: !!this.checkoutStatus, part: filterParam })), h("div", { key: 'e751b51d9e2725addd6e9b082bf326fc039b0a7a', class: "p-2" }, h("form-control-select", { key: '642fc1af53bc89d1604a864f4088781096cd24a2', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode || '', disabled: !!this.paymentMode, part: filterParam })), h("div", { key: 'a95638261e002677c51299342d34bafc8a8615b4', class: "p-2" }, h("form-control-date", { key: 'ca017b89e5ae0ea3f4d55ade8de2acbdc2062c86', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: filterParam })), h("div", { key: '0585dff7f655db9da4f3c2124eac6c90b74dbe3b', class: "p-2" }, h("form-control-date", { key: '50fee01232661f33c1996549cf6523c92dc937c4', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: filterParam }))))));
     }
     static get is() { return "justifi-checkouts-list-filters"; }

package/dist/collection/components/checkouts-list/justifi-checkouts-list.js

@@ -178,8 +178,8 @@ export class JustifiCheckoutsList {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(StyledHost, { key: '2f9efac8723333029415ef131516946912bb313c' }, h(TableWrapper, { key: '024c7a532533721acda9740a0888b1c15fa624fe' }, h(TableComponent, { key: '06bf1c6db731eb5857b08615222ca47a85ffc4a8' }, h(TableHead, { key: '0754f9cd87a3b32a5368e7fb7538071cf6be0505' }, h(TableHeadRow, { key: '5db4c5beea0e6e9afc29e16b5789a32ad94509dd' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '9140294035b04b549578d74374271f8a9fd78162' }, h(TableLoadingState, { key: 'bf495d00b9bc4ee28b67c8f1b3258306f9202142', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '92f8a1245cc022fa3b254bb1fe8d659f75c62923', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '2e6ab100026afb29f199dd33e52de5ae77e6576c', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData &&
-            this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '3a1b55572eb0fc2ffcef1a39f6bfae5693056752' }, h(TableFootRow, { key: 'f61a3cc86fda3ec95075381403916f5fb1c46ca6' }, h(TableFootCell, { key: '7d937a0d228062f42f49dca5bdb436d54354563e', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '05454876b7faeeb73fb8f896a2425e5f9db12ee3', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: 'd384dda32587dfc469e998b2b8f209ef17aef775' }, h(TableWrapper, { key: '98f2472188e64a236fd5cc581efe2895a6de58a3' }, h(TableComponent, { key: 'f02db4d024b9d2250a637fb28dca06eaff1d894c' }, h(TableHead, { key: '8c96bfa14e4e2154c1f575595f9597d3adc640df' }, h(TableHeadRow, { key: '08cddf6a31fbe99c8b46f61ceca996acb9b87f0b' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '99b88bfdb3871f82d653b00536f22c5c17cf38ac' }, h(TableLoadingState, { key: 'e05e1d543481df360b42e5563d5963277d10110e', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '3c4e19d3e8c9c779249efa63be592fbf5948b6ae', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: '7660b4991974dc46d8fb9dfd28ef7ea79d8e22e0', columnSpan: this.checkoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData &&
+            this.checkoutsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'd56c6cb6a529dabf00c5260a39a2e2ab8e3749be' }, h(TableFootRow, { key: 'd28363ad8d8823f3da097edb263aa10308cbdb04' }, h(TableFootCell, { key: 'd6fcce3cf39e43718e8b15d42445c053d0feaa21', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '6b956571ed6ae297df5430cad4be92eee2bdb9cc', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "justifi-checkouts-list"; }
     static get encapsulation() { return "shadow"; }