@justifi/webcomponents 5.7.2 → 5.7.3-rc-02

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";
 // Common Validations
 export const emailValidation = string()
     .email('Enter valid email')
@@ -161,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/bank-account-form/bank-account-form.js

@@ -31,10 +31,10 @@ export class BankAccountForm {
         return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: 'b6cdf5a9320d92a5390daaa0a5218274f2dfc178' }, h(BankAccountFormSkeleton, { key: '286fcc38a26820d166ced0bc886143ed3d880da4', isReady: this.isReady }), h("div", { key: '041fcacff70d7cdfc0c8f41258bd9db18703e4c1', class: "container-fluid p-0", style: {
+        return (h(Host, { key: '1b0156c264d4eddde8a97f78fefb70bd0c997aa0' }, h(BankAccountFormSkeleton, { key: '34cc2e35f9f3e5d88e03343db3b2a1fcf5d1b9e2', isReady: this.isReady }), h("div", { key: '472a483b7061174762ff3413f1da3af8952e100d', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '94dc0eb0d79b40ade96e1961611e3e7a8eef20ea', class: "row mb-3" }, h("iframe-input", { key: '41c82b772e7873a45409e35ed56dfea16c20c2ee', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '1c95618a50e2d36a3a9a3a7b691ae0dfa6a09936', class: "row" }, h("iframe-input", { key: '28a4dde70c8f55b4f6bf6ce2d3beee6acbebbc0b', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, h("div", { key: '975830a13c6f33fe89c1a40ac6d78c1a2342154d', class: "row mb-3" }, h("iframe-input", { key: '0c97e7e9fcc461ff67d572d6628639eb71368502', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '0648b42be75e251e20e47ebcc2599e597e03f1b3', class: "row" }, h("iframe-input", { key: 'e33011481a387bd05335804b82957b40129ddf4e', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
     }
     static get is() { return "bank-account-form"; }
     static get states() {

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

@@ -1,9 +1,7 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { billingFormSchema } from "./billing-form-schema";
 import { billingForm } from "../../../styles/parts";
 import { Header3 } from "../../../ui-components";
-import { numberOnlyHandler } from "../../../ui-components/form/utils";
-import StateOptions from "../../../utils/state-options";
 import { FormController } from "../../../ui-components/form/form";
 export class BillingForm {
     constructor() {
@@ -40,9 +38,8 @@ export class BillingForm {
         return { isValid, errors };
     }
     render() {
-        const billingFormDefaultValue = this.formController.getInitialValues();
         const showHeader = !this.isPostalOnlyMode && !this.hideAllBillingFields;
-        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 }))))))));
+        return (h("div", { key: 'e1834cb4638e0b5ea99c55e7a2f73542d2e5ea8d', part: billingForm, class: "mt-4", hidden: this.hideAllBillingFields }, showHeader && h(Header3, { key: '9936d16177d2c83219872c44b9ca91c264ae7052', text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), this.legend && h("legend", { key: 'c467223d7571122ea5c17885eed658c6cd6faf36' }, this.legend), this.isPostalOnlyMode ? (h("justifi-postal-code-form", null)) : (h("justifi-billing-information-form", null))));
     }
     static get is() { return "justifi-billing-form"; }
     static get properties() {

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

@@ -35,10 +35,10 @@ export class CardForm {
         return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
     }
     render() {
-        return (h(Host, { key: '3d28e96f020196a359a359507237b50dd9fed020' }, h(CardFormSkeleton, { key: 'ee07eb10acf142fcaab1398278e335df49f1abe9', isReady: this.isReady }), h("div", { key: 'bfce475f392cbb2bad3fd1c76f16c6e6a6718c1f', class: "container-fluid p-0", style: {
+        return (h(Host, { key: 'c43351c7ab1eb6bf413f162634f55007798bb076' }, h(CardFormSkeleton, { key: 'f0a29497de2270108868e892d666b552dea27a1e', isReady: this.isReady }), h("div", { key: '2734b111c1f2f2275435d2141445ac30482946be', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: 'e8517852800a9a165e61308f8d1cf875a87c021e', class: "mb-3" }, h("iframe-input", { key: '6efe224b7f4a2f63eec601d3e48c454d78c30300', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: 'cb6df3c5d9788a22c26255d1fe94331544730d24', class: "row" }, h("div", { key: '895943798b131da4215b24da822f7109e045e05b', class: "col-4 align-content-end" }, h("iframe-input", { key: 'ebea71cabe9f783734f924cfd0b03797cd203ce7', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: 'a65042ba66ca4a2a6f520147d316eb20f82369ea', class: "col-4 align-content-end" }, h("iframe-input", { key: '8ef921245a3075ba36c310955bea671b71aca658', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'e37d637b078a36736ba698d0d96465e138fcf5ab', class: "col-4 align-content-end" }, h("iframe-input", { key: 'df20adb17524ea29f55e1c223267a9f0294b6062', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: '036c359caaf8fc36fa6ba56bbcad5d01de1fe9c9', class: "mb-3" }, h("iframe-input", { key: '9baf7dc76ff18f8dee6e6cd08b93e1ba155d5cf2', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: 'cd54e4a30da50cfe5151b557fe1d92ebb483ad7e', class: "row" }, h("div", { key: '6b3e84079d606a6ffd5580deae0d6e4563d4c7ef', class: "col-4 align-content-end" }, h("iframe-input", { key: '9ea2ad1c93ca90bbb4bc7a4c83a72e8f4cc9da61', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '9478f77f64decfcdfd77f888d54cb37f46ad8ab7', class: "col-4 align-content-end" }, h("iframe-input", { key: '43191d41eb743e0c509236ea316c1afb180b8fbb', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '65599647fc750e6c62fb2866190ffa87689d8a5b', class: "col-4 align-content-end" }, h("iframe-input", { key: 'df367f3143aaff25ba9147698090ccbcea902cbf', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
     }
     static get is() { return "card-form"; }
     static get states() {

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

@@ -1,62 +1,112 @@
 import { h } from "@stencil/core";
-import { makeGetCheckout, makeCheckoutComplete } from "../../actions/checkout/checkout-actions";
+import { makeGetCheckout } from "../../actions/checkout/checkout-actions";
 import { CheckoutService } from "../../api/services/checkout.service";
-import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import JustifiAnalytics from "../../api/Analytics";
+import { Checkout as CheckoutConstructor } from "../../api";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
+import checkoutStore from "../../store/checkout.store";
+import { Button, Header2, Header3, Skeleton, StyledHost } from "../../ui-components";
+import { checkoutSummary } from "../../styles/parts";
+import { insuranceValues, insuranceValuesOn, validateInsuranceValues } from "../insurance/insurance-state";
 export class Checkout {
     constructor() {
         this.errorMessage = '';
+        this.insuranceToggled = false;
+        this.renderState = 'loading';
+        this.fetchData = () => {
+            this.renderState = 'loading';
+            const actionsConfig = {
+                authToken: this.authToken,
+                checkoutId: this.checkoutId,
+                service: new CheckoutService()
+            };
+            const getCheckout = makeGetCheckout(actionsConfig);
+            getCheckout({
+                onSuccess: ({ checkout }) => {
+                    this.checkout = new CheckoutConstructor(checkout);
+                    const { status } = this.checkout;
+                    this.loadedEvent.emit({ checkout_status: status });
+                    this.renderState = 'success';
+                },
+                onError: ({ error, code, severity }) => {
+                    this.serverError = error;
+                    this.renderState = 'error';
+                    this.errorEvent.emit({
+                        errorCode: code,
+                        message: error,
+                        severity,
+                    });
+                }
+            });
+        };
+    }
+    propChanged() {
+        checkoutStore.authToken = this.authToken;
+        checkoutStore.checkoutId = this.checkoutId;
+        this.fetchData();
+    }
+    connectedCallback() {
+        if (this.authToken && this.checkoutId) {
+            checkoutStore.checkoutId = this.checkoutId;
+            checkoutStore.authToken = this.authToken;
+        }
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
-        this.initializeGetCheckout();
+        this.fetchData();
+        // Refresh the checkout data when insurance is added or removed
+        insuranceValuesOn('set', (key) => {
+            const value = insuranceValues[key];
+            if (value !== undefined) {
+                this.insuranceToggled = value;
+                this.fetchData();
+            }
+        });
     }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
     ;
-    initializeGetCheckout() {
-        if (this.authToken && this.checkoutId) {
-            this.getCheckout = makeGetCheckout({
-                authToken: this.authToken,
-                checkoutId: this.checkoutId,
-                service: new CheckoutService()
-            });
-            this.complete = makeCheckoutComplete({
-                authToken: this.authToken,
-                checkoutId: this.checkoutId,
-                service: new CheckoutService()
-            });
-        }
-        else {
-            this.errorEvent.emit({
-                message: 'auth-token and checkout-id are required',
-                errorCode: ComponentErrorCodes.MISSING_PROPS,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-        }
+    async submit(_event) {
+        // calls the submitCheckout method on the checkout wrapper
+        this.modularCheckoutRef.submitCheckout();
     }
-    propChanged() {
-        this.initializeGetCheckout();
+    get isLoading() {
+        return this.renderState === 'loading';
+    }
+    get summary() {
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "24px" })), h("justifi-checkout-summary", null)));
+    }
+    get paymentTypeHeader() {
+        const showPaymentTypeHeader = !this.disableCreditCard && !this.disableBankAccount;
+        if (!showPaymentTypeHeader)
+            return null;
+        return (h(Header3, { text: "Select payment type", class: "fs-6 fw-bold lh-lg" }));
+    }
+    get paymentType() {
+        var _a, _b, _c, _d, _e;
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "300px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("justifi-payment-method-options", { ref: (el) => (this.paymentMethodOptionsRef = el), "show-card": !this.disableCreditCard, "show-ach": !this.disableBankAccount, "show-bnpl": !this.disableBnpl, paymentMethodGroupId: (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_method_group_id, "show-saved-payment-methods": !this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, bnpl: (_b = this.checkout) === null || _b === void 0 ? void 0 : _b.bnpl, authToken: this.authToken, "account-id": (_c = this.checkout) === null || _c === void 0 ? void 0 : _c.account_id, savedPaymentMethods: ((_d = this.checkout) === null || _d === void 0 ? void 0 : _d.payment_methods) || [], paymentAmount: (_e = this.checkout) === null || _e === void 0 ? void 0 : _e.payment_amount, insuranceToggled: this.insuranceToggled }))));
     }
     async fillBillingForm(fields) {
-        this.checkoutCoreRef.fillBillingForm(fields);
+        this.paymentMethodOptionsRef.fillBillingForm(fields);
     }
     async validate() {
-        const { isValid } = await this.checkoutCoreRef.validate();
-        return { isValid };
+        const insuranceValidation = validateInsuranceValues();
+        const { isValid } = await this.paymentMethodOptionsRef.validate();
+        if (!insuranceValidation.isValid || !isValid) {
+            return { isValid: false };
+        }
+        else {
+            return { isValid: true };
+        }
     }
     render() {
-        return (h("justifi-checkout-core", { key: 'c1c7cf4f1aadce928e3ed6a6ae05a7824d875d68', getCheckout: this.getCheckout, authToken: this.authToken, complete: this.complete, disableCreditCard: this.disableCreditCard, disableBankAccount: this.disableBankAccount, disableBnpl: this.disableBnpl, disablePaymentMethodGroup: this.disablePaymentMethodGroup, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, ref: el => {
-                if (el) {
-                    this.checkoutCoreRef = el;
-                }
-            } }, h("div", { key: '7a4be7220e5eb199f94c5086c23e10dce68d4854', slot: "insurance" }, h("slot", { key: 'f5db23ef6dc82d0521518ea2dbfe99d8c8b6c2cc', name: "insurance" }))));
+        return (h(StyledHost, { key: '1a7978a2b2ae5f483ded09e8c2b49a1c3bee1dc1' }, h("justifi-modular-checkout", { key: '4da7015d6634fa1f703b88cd153bc55db256476a', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId }, h("div", { key: 'e3560a86e3634836bab94ad424850dfb72789674', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '31bde37f031dc3b18fe1da5f2a30d615aa3d079f', class: "col-12", part: checkoutSummary }, h(Header2, { key: 'd46cd4136ad4f0cac076e866f8fe095510a6361d', text: "Summary", class: "fs-5 fw-bold pb-3" }), this.summary), h("div", { key: 'efbba765415361bea56bc20d511640da23708c6a', class: "col-12" }, h("slot", { key: 'ca4d2531fb55c15ea1326921fb90d6a7cd14e579', name: "insurance" })), h("div", { key: '58b01f658771ef6be037713add40e7ff03361dc3', class: "col-12 mt-4" }, h(Header2, { key: '990723c85b6adf8eaa0711017d023d9103e1b8f2', text: "Payment", class: "fs-5 fw-bold pb-3" }), this.paymentTypeHeader, h("div", { key: 'dcc79ad150a87e7c67a78ff50b94585562d64d11', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '592f0c0d86c9f1bf9c56f82e8cdcfdcc12e7c5c4', class: "col-12" }, h("div", { key: '8130711b909ffca43c37b4eacab515c8a7acb77c', class: "d-flex justify-content-end" }, h(Button, { key: '7da0c99ff8438b22f6cf6a3f2d3bfc5d32a97ad2', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay")))))));
     }
     static get is() { return "justifi-checkout"; }
+    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "authToken": {
@@ -215,9 +265,12 @@ export class Checkout {
     }
     static get states() {
         return {
-            "getCheckout": {},
+            "checkout": {},
             "complete": {},
-            "errorMessage": {}
+            "errorMessage": {},
+            "insuranceToggled": {},
+            "renderState": {},
+            "serverError": {}
         };
     }
     static get events() {
@@ -242,6 +295,27 @@ export class Checkout {
                         }
                     }
                 }
+            }, {
+                "method": "submitEvent",
+                "name": "submit-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentSubmitEvent",
+                    "resolved": "ComponentSubmitEvent",
+                    "references": {
+                        "ComponentSubmitEvent": {
+                            "location": "import",
+                            "path": "../../api/ComponentEvents",
+                            "id": "src/api/ComponentEvents.ts::ComponentSubmitEvent"
+                        }
+                    }
+                }
             }, {
                 "method": "loadedEvent",
                 "name": "loaded",

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

@@ -80,14 +80,14 @@ export class NewPaymentMethod {
     showNewPaymentMethodForm() {
         var _a;
         const paymentMethodType = (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id;
-        return (h("div", { class: "mt-4 pb-4" }, h("hidden-input", null), paymentMethodType === 'card' ? (h("card-form", { ref: (el) => this.paymentMethodFormRef = el })) : (h("bank-account-form", { ref: (el) => this.paymentMethodFormRef = el })), h("justifi-billing-form", { ref: (el) => (this.billingFormRef = el), hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
+        return (h("div", { class: "mt-4 pb-4" }, h("hidden-input", null), paymentMethodType === 'card' ? (h("justifi-card-form", null)) : (h("justifi-bank-account-form", null)), h("justifi-billing-form", { hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, paymentMethodType: paymentMethodType }), h("justifi-save-new-payment-method", { hidden: !this.paymentMethodGroupId })));
     }
     get hiddenRadioInput() {
         return !this.showAch || !this.showCard;
     }
     render() {
         var _a, _b;
-        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));
+        return (h(Host, { key: '86a50eecba10706b674e3517c7b1e5ba6674035a', class: "payment-method" }, h("div", { key: '54ec6ea1d0eb1f1bcbb0b5c145858a270dc7ccf4', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: '348ab53888c29f3b942f2698dcb72450d73ed90d', 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() {

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

@@ -1,6 +1,12 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { PaymentMethodTypes } from "../../api/Payment";
 import { PaymentMethodOption } from "./payment-method-option-utils";
+import checkoutStore from "../../store/checkout.store";
+import { radioListItem } from "../../styles/parts";
+const PaymentMethodTypeLabels = {
+    bankAccount: 'New bank account',
+    card: 'New credit or debit card',
+};
 export class PaymentMethodOptions {
     constructor() {
         this.savedPaymentMethods = [];
@@ -33,12 +39,15 @@ export class PaymentMethodOptions {
         if (this.showAch) {
             this.paymentMethodOptions.push(new PaymentMethodOption({ id: PaymentMethodTypes.bankAccount }));
         }
-        if (!this.selectedPaymentMethodId) {
-            this.selectedPaymentMethodId = (_b = this.paymentMethodOptions[0]) === null || _b === void 0 ? void 0 : _b.id;
+        if (!checkoutStore.selectedPaymentMethod) {
+            checkoutStore.selectedPaymentMethod = (_b = this.paymentMethodOptions[0]) === null || _b === void 0 ? void 0 : _b.id;
         }
     }
     paymentMethodOptionSelected(event) {
-        this.selectedPaymentMethodId = event.detail.id;
+        checkoutStore.selectedPaymentMethod = event.detail.id;
+    }
+    get hiddenRadioInput() {
+        return !this.showAch || !this.showCard;
     }
     async resolvePaymentMethod(insuranceValidation) {
         var _a;
@@ -49,34 +58,7 @@ export class PaymentMethodOptions {
         return newPaymentMethodElement.validate();
     }
     render() {
-        var _a;
-        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;
-            const sezzle = paymentMethodOption.id === PaymentMethodTypes.sezzle;
-            if (newCard || newBankAccount) {
-                return (h("justifi-new-payment-method", { paymentMethodOption: paymentMethodOption, authToken: this.authToken, "account-id": this.accountId, "is-selected": isSelected, "show-card": this.showCard, "show-ach": this.showAch, paymentMethodGroupId: this.paymentMethodGroupId, hideCardBillingForm: this.hideCardBillingForm, hideBankAccountBillingForm: this.hideBankAccountBillingForm, ref: (el) => {
-                        if (isSelected) {
-                            this.selectedPaymentMethodOptionRef = el;
-                        }
-                    } }));
-            }
-            else if (sezzle) {
-                return (h("justifi-sezzle-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, paymentAmount: this.paymentAmount, bnpl: this.bnpl, ref: (el) => {
-                        if (isSelected) {
-                            this.selectedPaymentMethodOptionRef = el;
-                        }
-                    } }));
-            }
-            else if (this.showSavedPaymentMethods) {
-                return (h("justifi-saved-payment-method", { paymentMethodOption: paymentMethodOption, "is-selected": isSelected, ref: (el) => {
-                        if (isSelected) {
-                            this.selectedPaymentMethodOptionRef = el;
-                        }
-                    } }));
-            }
-        })));
+        return (h("div", { key: '43947388e9c3e84f5af7ebefb379dcb0fc89bae7' }, h("div", { key: '203dde4a60f39cfb38408f58670b89047cadd3b3', class: "radio-list-item p-3", part: radioListItem, onClick: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.card; }, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: 'c26d64e69722cbdcdd1d573c93328d322b2db256', name: "paymentMethodType", value: PaymentMethodTypes.card, checked: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card, label: PaymentMethodTypeLabels[PaymentMethodTypes.card] })), h("div", { key: '87799dce96c87b24d3f7ecc597021dbfde851a22', class: "radio-list-item p-3", part: radioListItem, onClick: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.bankAccount; }, hidden: this.hiddenRadioInput }, h("form-control-radio", { key: '22df7be58ce8a58a8ce38a52912234bd313c4d2e', name: "paymentMethodType", value: PaymentMethodTypes.bankAccount, checked: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount, label: PaymentMethodTypeLabels[PaymentMethodTypes.bankAccount] })), h("justifi-sezzle-payment-method", { key: '3ce43229e7268a453e5a2bad83f573105e8a6727' }), h("justifi-saved-payment-methods", { key: 'e6de7f6010736a702337dd91defc8bf00604ee34', exportparts: radioListItem.split(' ').join(',') })));
     }
     static get is() { return "justifi-payment-method-options"; }
     static get properties() {
@@ -119,9 +101,9 @@ export class PaymentMethodOptions {
                 "setter": false,
                 "reflect": false
             },
-            "showBnpl": {
+            "showSavedPaymentMethods": {
                 "type": "boolean",
-                "attribute": "show-bnpl",
+                "attribute": "show-saved-payment-methods",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -138,9 +120,9 @@ export class PaymentMethodOptions {
                 "setter": false,
                 "reflect": false
             },
-            "showSavedPaymentMethods": {
+            "showBnpl": {
                 "type": "boolean",
-                "attribute": "show-saved-payment-methods",
+                "attribute": "show-bnpl",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -337,7 +319,6 @@ export class PaymentMethodOptions {
     }
     static get states() {
         return {
-            "selectedPaymentMethodId": {},
             "paymentMethodOptions": {}
         };
     }

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

@@ -8,7 +8,7 @@ export class SaveNewPaymentMethod {
         this.checkboxChanged.emit(this.isChecked);
     }
     render() {
-        return (h("div", { key: 'e6e7a75237ec2062188bf85deadac58892663b3b', class: "mt-4 form-check" }, h("form-control-checkbox", { key: 'abbaeb4e9119c4d41f0a727c7a070c14b7418302', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange.bind(this) })));
+        return (h("div", { key: 'b196a8d34fb4afe1293f4ff9f6eea8bb3ed4c1a6', class: "mt-4 form-check" }, h("form-control-checkbox", { key: '1f35cb80578373e1f77f2a95f08310f0830e1c90', label: "Save new payment method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange.bind(this) })));
     }
     static get is() { return "justifi-save-new-payment-method"; }
     static get states() {

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

@@ -18,7 +18,7 @@ export class SavedPaymentMethod {
     ;
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '78487e52f549547f4c89f48a238a8916d77d4f1c', class: "payment-method" }, h("div", { key: 'd437a5f9e79356b1177703da2b5d7f4ca98072ce', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '0dd03b9ebae98c441c63717aba310d77e587b1c8', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
+        return (h(Host, { key: '96a1e315728d17d67ef35f2a269210ec28b7eb24', class: "payment-method" }, h("div", { key: 'fb9edf8f6a5a2f76138a83f36c949ffdee4f0f01', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '14388b6e3ba9e631719587b798485e4d30664639', name: "paymentMethodType", value: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, checked: this.isSelected, label: `${CardBrandLabels[(_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.brand] || ''} *${(_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.acct_last_four}` }))));
     }
     static get is() { return "justifi-saved-payment-method"; }
     static get properties() {

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

@@ -118,7 +118,7 @@ export class CheckoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '79f36b8dd358285868187892962f5e2138942fe8' }, h(TableComponent, { key: 'e48c644e425ac45ab27b92548bc49af35b599245' }, h(TableHead, { key: '6d47b68c0a74f0eff3146dfc4720b0cc0f6fc24d' }, h(TableHeadRow, { key: 'a3660ae82b53ba7dead2e577fd8d573426935dc6' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '08fbd465bae0afa3de8d472c84e0410150509673' }, h(TableLoadingState, { key: 'ba7d778f9fc029166d6228fe9b1a8f1598a68c5a', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '312b176371526658852b74ae228524695f5c1947', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'a24680fb1d681397a3cb266ec34ab5c9310dfa64', 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: '503ffd707d958a353a18a6f06d1280a0cb01c741' }, h(TableFootRow, { key: '250fcfc3961881ab460221e5e0160d5b6d35e5c3' }, h(TableFootCell, { key: '2631d54b49bbee1502e5412cd9303d7d67746525', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'd7bb27501b62a1089090b06c82b2a2c328a2e0b6', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'c496328d1840fb1f823f233c04c78525b5f12553' }, h(TableComponent, { key: 'f994cfed9bf75a299fc94dd22306911d84b44541' }, h(TableHead, { key: '0ffb6ce97ebe1a35eb0143b43767223d844a70e0' }, h(TableHeadRow, { key: 'd063eaafc44bf75be0de5463a1f9b2789ec8b76e' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: '624a316c1631070a999c48342e71c55207b51be3' }, h(TableLoadingState, { key: '0f7444acf626537bf2179fdb64a435550bcf20d3', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'ea68f85498d3bcbb44c8d9158d5cc6a228867e6c', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'db72f0190431182f410f246ad00fceb51901fd66', 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: '855184d90f85a1dd299c372b5b065e1af2151a99' }, h(TableFootRow, { key: 'b216c505abd04f79c0a733312fc5babdb35f2b77' }, h(TableFootCell, { key: 'efa83af6ee8543443826ccfe4efc230afc5d05f6', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: '70664e167672a40b63c7fdd2603c52e8584870e9', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "checkouts-list-core"; }
     static get properties() {

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

@@ -38,7 +38,7 @@ export class CheckoutsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: 'bcae6fee83117dde40a29ebcab8e85089bcdc37e' }, h("table-filters-menu", { key: '56c6a5d205836fe010917f0f0d978507cf227a3f', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: 'c82691f9b863368a2b7523dc7d9d348c3fe2e776', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '9abbb01e53139ebd376a638400b199d88288b175', class: "p-2" }, h("form-control-select", { key: '3859777cf1f4ee451a65440a90dfe9e5f4a2f069', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: '3c23d4b820ea2424d6ddc01e6952c8c46cd7d975', class: "p-2" }, h("form-control-select", { key: 'c376228f82419b959b3fefa6b32d25c584c6ea3b', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode, disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
+        return (h(StyledHost, { key: '75225e92af6efb7185735a63adf83ed7699452b1' }, h("table-filters-menu", { key: '086762cdd3a08d9221be6d374d4fd4d1b82c717f', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: '23f5d2938419a2e92cbacf79d82a3893b6d256c2', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '43bf85dccce2233d59720defbea2897df488d880', class: "p-2" }, h("form-control-select", { key: '61c381ec0a205245311ba2e490a03b1e571d366b', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: '4d01e881ca741302be99559209ab383aad4ee739', class: "p-2" }, h("form-control-select", { key: '82a1c6c3cfa9c77bc656aff5d7b0130436a54042', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode, disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
     }
     static get is() { return "justifi-checkouts-list-filters"; }
     static get encapsulation() { return "shadow"; }

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

@@ -61,7 +61,7 @@ export class CheckoutsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: 'c76ca3b186023ebea3ac3fe0cf6599786a2f2ea7' }, h("checkouts-list-core", { key: '484d31c0b0434181b3bd69cb9c3b6810aa0f2983', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '0e9e50e18983dad43cfab19f2271678d3f5e6abd' }, h("checkouts-list-core", { key: '6f128cc756477ff64638625d9a9ff9a5b4533948', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-checkouts-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dispute-management/dispute-management-core.js

@@ -46,7 +46,7 @@ export class DisputeManagementCore {
         });
     }
     render() {
-        return (h("div", { key: '5a8663529813801b730d449c835cfafb9924d860' }, this.showDisputeResponseForm ? (h("justifi-dispute-response", { disputeId: this.disputeId, disputeResponse: this.dispute.dispute_response, authToken: this.authToken })) : (h("justifi-dispute-notification", { dispute: this.dispute, authToken: this.authToken, isLoading: this.isLoading }))));
+        return (h("div", { key: '6374c478bc8907019b48e1a53b0ecb2e171ab2e4' }, this.showDisputeResponseForm ? (h("justifi-dispute-response", { disputeId: this.disputeId, disputeResponse: this.dispute.dispute_response, authToken: this.authToken })) : (h("justifi-dispute-notification", { dispute: this.dispute, authToken: this.authToken, isLoading: this.isLoading }))));
     }
     static get is() { return "justifi-dispute-management-core"; }
     static get properties() {

package/dist/collection/components/dispute-management/dispute-management.js

@@ -43,7 +43,7 @@ export class DisputeManagement {
         }
     }
     render() {
-        return (h("justifi-dispute-management-core", { key: '5abe4c29317f9baa7fc40d82e2cd533de321d58f', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
+        return (h("justifi-dispute-management-core", { key: 'e19f33cd7106c3c44fb86faeef743c62ff9004b9', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
     }
     static get is() { return "justifi-dispute-management"; }
     static get properties() {

package/dist/collection/components/dispute-management/dispute-notification.js

@@ -30,7 +30,7 @@ export class DisputeNotification {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h(StyledHost, { key: '77119b1227200909f4742e24df0a45e1f631c65c' }, this.isLoading && (h("div", { key: 'f0766ff057fb2f4b75b34c7d4a386bde43e49652', style: { marginBottom: '8px' } }, h(Skeleton, { key: 'd7268194dea5ac2a3b87aea8e17573b4768e308f', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: 'f8863e45a917f56be302ca1b0b3d472119f6465c', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: 'c7b8c9c89d9488eea3be8ea0b4536f98a8151487', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && (h("div", { key: '875fe7def317ce1c4547e04e83baf2b232209058', part: text }, h("h1", { key: '09646afc2aac3bf4ef9737bc12442660bbafb2dd', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: '14224cffb16726eaa589118be954e0f844ffaee8' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: '415028b91872a2391796872fdffdbee837a2a511', class: "h5" }, "Dispute details"), h("div", { key: 'c2b8c6be3132f98eb8c686ab88a5a6a68f92a60e', class: "d-table gap-2" }, h("div", { key: 'd11bd8b3bc680183e8bee40281cc2c294aedbd5a', class: "d-table-row gap-2" }, h("span", { key: 'd77796c0d2764329c3b482ae49ceb8b4cac03d37', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: '716d8af2a250c3237af6e23b43bf50e032e9f203', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, formatCurrency((_b = this.dispute) === null || _b === void 0 ? void 0 : _b.amount))), h("div", { key: 'daba4379197533d2a4b246e81139d81cd15761c6', class: "d-table-row gap-2" }, h("span", { key: 'a039fbf47aff16445e3411c33a7b53716c42866d', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '19087aba5c516d0c71e9f84e8b3323a044ae532a', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_c = this.dispute) === null || _c === void 0 ? void 0 : _c.reason)), h("div", { key: '68ef78b15627df3b22bcde4b90f7c216466e7468', class: "d-table-row gap-2" }, h("span", { key: '9463c281d76b5e201a55c2993253fc22d04168dc', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Dispute ID"), h("span", { key: '5cffed27038f5571f37377c5023a88c8b7773a59', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_d = this.dispute) === null || _d === void 0 ? void 0 : _d.id))), h("div", { key: 'e856d924edac10116781425f6d7c4c8c6b26ced2', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: '6d5278a91f79c2fe8fbdd9e391b109a6491b13b6', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '242b9076b482aae731ab6bedc1592a1a826e24c5', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_e = this.dispute) === null || _e === void 0 ? void 0 : _e.underReview) && (h("div", { key: 'f3711546ce5bf8b6a4a8689f5db3fdbf58f45bf4' }, h("h1", { key: '06e39be43cfacf667919adbd2f4f8c596702c340', class: "h4" }, "This payment is disputed and under review"), h("p", { key: 'b3bfef2d40e197f8dc9df6f71d9f13017a4b923d' }, "The cardholder is disputing this payment. A counter dispute has been submitted and is under review."))), ((_f = this.dispute) === null || _f === void 0 ? void 0 : _f.won) && (h("div", { key: '580144b1439d6e017726b9731b7bb15e71900092' }, h("h1", { key: '42d74d215d23409672449af86e25c945aac33ea1', class: "h4" }, "This payment was disputed"), h("p", { key: '4c337e89a32f62c8f03a53eb84737785f4b0bdb4' }, "The cardholder disputed this payment and the card issuer has settled it in your favor."))), ((_g = this.dispute) === null || _g === void 0 ? void 0 : _g.lost) && (h("div", { key: '66c0f7bbada42053683dd25776a7c0abdb708315' }, h("h1", { key: '273f2d82dbe73a15da3186946763579be2801aa4', class: "h4" }, "This payment was disputed"), h("p", { key: '22172d1c6833eb5407c19dd31b85db805d07d177' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
+        return (h(StyledHost, { key: 'ec6f99be66b3b164c367b96d8274824d2e709dd5' }, this.isLoading && (h("div", { key: '26587e055eb4756785ae5935fd803746ddab355d', style: { marginBottom: '8px' } }, h(Skeleton, { key: '159c5d9b0fb16af4aac0125ea5e69bd9f7b4210e', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: '5c89a8dd2244ddaed8c26b743cb22f20fa2e2742', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: '6f0a6ebf743bdbea125c6630cb98c5bda5bd9919', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && (h("div", { key: 'f44a0c9494731be14b75e3b25adc2b09c61c84a5', part: text }, h("h1", { key: 'd8820437a86bebcc0782607796b4f2c5429d40e7', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: '8cf4a2b3194d781d5f17ae3067d9931be54159e2' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: 'd79312da2cc6715016be0b57d1b70e0ddbc2b8c5', class: "h5" }, "Dispute details"), h("div", { key: '958af1e87a119c4af76729b54bf322c16b966c54', class: "d-table gap-2" }, h("div", { key: 'e10802db747c99408371863c94c2f47737a03626', class: "d-table-row gap-2" }, h("span", { key: '84b151c7c9846fd395517ab14339504e56e5298d', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: '197dffa3676aa9ff7425cea00eca69bb84bef427', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, formatCurrency((_b = this.dispute) === null || _b === void 0 ? void 0 : _b.amount))), h("div", { key: '4754429fa095be98083e34b32485cc45f379151b', class: "d-table-row gap-2" }, h("span", { key: 'c3e168a4d7dd902b9c4bc67531b7489dea32bda2', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: 'f08c9ce67f2b7b673de82963bacaf6ea8af87353', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_c = this.dispute) === null || _c === void 0 ? void 0 : _c.reason)), h("div", { key: '0de1ab69dbc18cb00b31df8c2c4ab421a5982b4b', class: "d-table-row gap-2" }, h("span", { key: '8217191859fed71cbeac5173b0a43ff4a98c397d', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Dispute ID"), h("span", { key: 'e63c3d2a1f0dbd98aae53a402be9fa96344e4f0b', part: "detail-section-item-data", class: "flex-1 d-table-cell text-wrap" }, (_d = this.dispute) === null || _d === void 0 ? void 0 : _d.id))), h("div", { key: '5767bc945b2fd3c7390011771b5c7a53c27c4447', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: 'dd6676ca0348579051cf13ce32bf6d9b1a2a3d21', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '27655bc90dd44e05180739e9c2a0f695ad294266', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_e = this.dispute) === null || _e === void 0 ? void 0 : _e.underReview) && (h("div", { key: '2b25123f6bf95ad7e847b4365f96eab71f1933f8' }, h("h1", { key: 'ab4b47f721ded5deb8b04a9b55b6c2978616f23b', class: "h4" }, "This payment is disputed and under review"), h("p", { key: 'bf4ee462258e4742ddf5722f470b597134489ee1' }, "The cardholder is disputing this payment. A counter dispute has been submitted and is under review."))), ((_f = this.dispute) === null || _f === void 0 ? void 0 : _f.won) && (h("div", { key: 'ba1257cb1448cb8b4cd1aba4340f2ac65208e264' }, h("h1", { key: '203b5926fa96278cfd3a7b0a4d5398226b2361b6', class: "h4" }, "This payment was disputed"), h("p", { key: '8f05fc9fb0d7f5151519bbf82ed6abeca676e4b5' }, "The cardholder disputed this payment and the card issuer has settled it in your favor."))), ((_g = this.dispute) === null || _g === void 0 ? void 0 : _g.lost) && (h("div", { key: '1f6d1d4048cc011d61292934dd225ef07dcf260d' }, h("h1", { key: '3df3c3a6bf4c86e8eb0361b039d88f55b502177c', class: "h4" }, "This payment was disputed"), h("p", { key: '03f2dce54b06ad242f8e8d1d4c8194219013af1c' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
     }
     static get is() { return "justifi-dispute-notification"; }
     static get encapsulation() { return "shadow"; }