@justifi/webcomponents 6.0.0-rc.4 → 6.0.0-rc.6

package/dist/collection/api/services/apple-pay.service.js

@@ -0,0 +1,293 @@
+import { Api } from "../Api";
+import { ApplePaySessionStatus, ApplePayHelpers, ApplePayConfig, ApplePayPaymentRequest, } from "../ApplePay";
+export class ApplePayService {
+    constructor() {
+        this.api = Api();
+    }
+    /**
+     * Initialize Apple Pay configuration
+     */
+    initialize(applePayConfig) {
+        this.applePayConfig = new ApplePayConfig(applePayConfig);
+        if (!this.applePayConfig.isValid) {
+            throw new Error('Invalid Apple Pay configuration provided');
+        }
+    }
+    /**
+     * Validate merchant with Apple Pay servers via API
+     */
+    async validateMerchant(authToken, accountId) {
+        const endpoint = 'apple_pay/merchant_session';
+        try {
+            const response = await this.api.post({
+                endpoint,
+                authToken,
+                headers: {
+                    'Sub-Account': accountId,
+                },
+            });
+            return response;
+        }
+        catch (error) {
+            console.error('Backend validation failed:', error);
+            throw new Error('Merchant validation failed');
+        }
+    }
+    /**
+     * Process Apple Pay payment via API (fixed to match original logic)
+     */
+    async processPayment(authToken, accountId, payload) {
+        const endpoint = 'apple_pay/process_token';
+        const result = await this.api.post({
+            endpoint,
+            authToken,
+            body: payload,
+            headers: {
+                'Sub-Account': accountId,
+            },
+        });
+        return {
+            success: result.id && !!result.data.token,
+            data: result,
+        };
+    }
+    /**
+     * Check if Apple Pay is available on this device/browser
+     */
+    isAvailable() {
+        return (ApplePayHelpers.isApplePaySupported() && ApplePayHelpers.canMakePayments());
+    }
+    /**
+     * Check if the user has an active card for the merchant
+     */
+    async canMakePaymentsWithActiveCard() {
+        if (!this.applePayConfig) {
+            throw new Error('Apple Pay not initialized. Call initialize() first.');
+        }
+        return await ApplePayHelpers.canMakePaymentsWithActiveCard(this.applePayConfig.merchantIdentifier);
+    }
+    /**
+     * Start Apple Pay session
+     */
+    async startPaymentSession(paymentRequest, authToken, accountId) {
+        if (!this.applePayConfig) {
+            throw new Error('Apple Pay not initialized. Call initialize() first.');
+        }
+        // if (!this.isAvailable()) {
+        //   throw new Error('Apple Pay is not available on this device/browser');
+        // }
+        const request = new ApplePayPaymentRequest(paymentRequest);
+        if (!request.isValid) {
+            throw new Error('Invalid payment request provided');
+        }
+        this.currentPaymentRequest = request;
+        return new Promise((resolve, reject) => {
+            try {
+                this.currentSession = new window.ApplePaySession(3, request);
+                this.setupSessionEventHandlers(resolve, reject, authToken, accountId);
+                this.currentSession.begin();
+            }
+            catch (error) {
+                reject({
+                    success: false,
+                    error: {
+                        code: 'SESSION_ERROR',
+                        message: error instanceof Error
+                            ? error.message
+                            : 'Failed to start Apple Pay session',
+                    },
+                });
+            }
+        });
+    }
+    /**
+     * Abort current Apple Pay session
+     */
+    abortPaymentSession() {
+        if (this.currentSession) {
+            this.currentSession.abort();
+            this.currentSession = undefined;
+            this.currentPaymentRequest = undefined;
+        }
+    }
+    /**
+     * Setup Apple Pay session event handlers
+     */
+    setupSessionEventHandlers(resolve, reject, authToken, accountId) {
+        if (!this.currentSession ||
+            !this.applePayConfig ||
+            !this.currentPaymentRequest) {
+            return;
+        }
+        this.currentSession.onvalidatemerchant = async () => {
+            try {
+                if (!authToken) {
+                    throw new Error('Authentication token not provided.');
+                }
+                const merchantSession = await this.validateMerchant(authToken, accountId);
+                try {
+                    this.currentSession.completeMerchantValidation(merchantSession);
+                }
+                catch (completionError) {
+                    console.error('Error calling completeMerchantValidation:', completionError);
+                    throw completionError;
+                }
+            }
+            catch (error) {
+                console.error('=== MERCHANT VALIDATION ERROR ===');
+                console.error('Error during merchant validation:', error);
+                console.error('Error stack:', error.stack);
+                this.currentSession.abort();
+                reject({
+                    success: false,
+                    error: {
+                        code: 'MERCHANT_VALIDATION_ERROR',
+                        message: error instanceof Error
+                            ? error.message
+                            : 'Merchant validation failed',
+                    },
+                });
+            }
+        };
+        this.currentSession.onpaymentauthorized = async (event) => {
+            try {
+                const payment = event.payment;
+                const paymentPayload = Object.assign(Object.assign({}, payment.token), { product_details: {
+                        name: this.currentPaymentRequest.total.label,
+                        price: ApplePayHelpers.parseAmount(this.currentPaymentRequest.total.amount),
+                        description: this.currentPaymentRequest.total.label,
+                    } });
+                const paymentResult = await this.processPayment(authToken, accountId, paymentPayload);
+                if (paymentResult.success) {
+                    this.currentSession.completePayment({
+                        status: ApplePaySessionStatus.STATUS_SUCCESS,
+                    });
+                    resolve({
+                        success: true,
+                        token: payment.token,
+                        paymentMethodId: paymentResult.data.id,
+                    });
+                }
+                else {
+                    console.error('PSP reported payment failure:', paymentResult.data);
+                    this.currentSession.completePayment({
+                        status: ApplePaySessionStatus.STATUS_FAILURE,
+                    });
+                    reject({
+                        success: false,
+                        error: {
+                            code: 'PAYMENT_PROCESSING_ERROR',
+                            message: 'Payment processing failed',
+                        },
+                    });
+                }
+            }
+            catch (error) {
+                console.error('=== PAYMENT PROCESSING ERROR ===');
+                console.error('Error processing payment:', error);
+                console.error('Error stack:', error.stack);
+                this.currentSession.completePayment({
+                    status: ApplePaySessionStatus.STATUS_FAILURE,
+                });
+                reject({
+                    success: false,
+                    error: {
+                        code: 'PAYMENT_PROCESSING_ERROR',
+                        message: error instanceof Error
+                            ? error.message
+                            : 'Payment processing failed',
+                    },
+                });
+            }
+            finally {
+                this.currentSession = undefined;
+                this.currentPaymentRequest = undefined;
+            }
+        };
+        this.currentSession.onpaymentmethodselected = () => {
+            const paymentUpdate = {
+                newTotal: this.currentPaymentRequest.total,
+                newLineItems: this.currentPaymentRequest.lineItems || [],
+            };
+            try {
+                this.currentSession.completePaymentMethodSelection(paymentUpdate);
+            }
+            catch (error) {
+                console.error('Error completing payment method selection:', error);
+                this.currentSession.abort();
+            }
+        };
+        this.currentSession.onshippingmethodselected = () => {
+            this.currentSession.completeShippingMethodSelection({
+                status: ApplePaySessionStatus.STATUS_SUCCESS,
+                newTotal: this.currentPaymentRequest.total,
+                newLineItems: this.currentPaymentRequest.lineItems || [],
+            });
+        };
+        this.currentSession.oncancel = (event) => {
+            if (event.sessionError) {
+                console.error(event.sessionError);
+                switch (event.sessionError.code) {
+                    case 'unknown':
+                        console.error('Unknown error - likely merchant validation issue');
+                        console.error('This usually means:');
+                        console.error('1. Merchant certificate is invalid or expired');
+                        console.error('2. Merchant identifier mismatch');
+                        console.error('3. Backend validation endpoint issues');
+                        break;
+                    case 'invalidMerchantSession':
+                        console.error('Invalid merchant session provided');
+                        console.error('Check that the merchant session from backend is valid');
+                        break;
+                    case 'userCancel':
+                        console.error('User cancelled the payment');
+                        break;
+                    default:
+                        console.error('Other error code:', event.sessionError.code);
+                }
+            }
+            this.currentSession = undefined;
+            this.currentPaymentRequest = undefined;
+            reject({
+                success: false,
+                error: {
+                    code: 'USER_CANCELLED',
+                    message: 'User cancelled the Apple Pay session',
+                },
+            });
+        };
+        if ('onerror' in this.currentSession) {
+            this.currentSession.onerror = (error) => {
+                console.error('=== APPLE PAY SESSION ERROR ===');
+                console.error('Session error:', error);
+                this.currentSession = undefined;
+                this.currentPaymentRequest = undefined;
+                reject({
+                    success: false,
+                    error: {
+                        code: 'SESSION_ERROR',
+                        message: 'Apple Pay session error occurred',
+                    },
+                });
+            };
+        }
+    }
+    /**
+     * Create a basic payment request
+     */
+    static createPaymentRequest(amount, label, countryCode = 'US', currencyCode = 'USD') {
+        return {
+            countryCode,
+            currencyCode,
+            merchantCapabilities: ApplePayHelpers.getDefaultMerchantCapabilities(),
+            supportedNetworks: ApplePayHelpers.getDefaultSupportedNetworks(),
+            total: ApplePayHelpers.createLineItem(label, amount),
+        };
+    }
+    /**
+     * Get current configuration
+     */
+    getApplePayConfig() {
+        return this.applePayConfig;
+    }
+}

package/dist/collection/api/services/plaid.service.js

@@ -0,0 +1,20 @@
+import { Api } from "..";
+const api = Api();
+export class PlaidService {
+    async getLinkToken(authToken, accountId, checkoutId, signal) {
+        const endpoint = `plaid/${accountId}/link`;
+        const body = { checkout_id: checkoutId };
+        return api.post({ endpoint, body, authToken, signal });
+    }
+    async tokenizeBankAccount(authToken, accountId, publicToken, linkTokenId, paymentMethodGroupId, signal) {
+        const endpoint = `plaid/${accountId}/tokenize`;
+        const body = { public_token: publicToken };
+        if (linkTokenId) {
+            body.link_token_id = linkTokenId;
+        }
+        if (paymentMethodGroupId) {
+            body.payment_method_group_id = paymentMethodGroupId;
+        }
+        return api.post({ endpoint, body, authToken, signal });
+    }
+}

package/dist/collection/assets/plaid-icon.svg

@@ -0,0 +1 @@
+<svg height="48" viewBox="0 0 28 29" xmlns="http://www.w3.org/2000/svg" class="css-1rdaj8m"><g fill="#111" fill-rule="evenodd"><path d="M25.7629 26.2628L28 17.5309L24.9691 14.5001L27.9999 11.4691L25.7628 2.73706L17.0309 0.5L14.0001 3.531L10.969 0.50014L2.23706 2.73734L0 11.4691L3.03128 14.4999L0.00014 17.531L2.2372 26.2629L10.9691 28.5L14.0001 25.469L17.031 28.4999L25.7629 26.2628ZM15.7321 23.7371L18.6186 20.8505L22.2912 24.5233L17.6956 25.7007L15.7321 23.7371ZM11.1136 9.88154L14.0003 6.99502L16.8868 9.8814L14.0001 12.7679L11.1136 9.88154ZM12.2682 14.5L9.38154 17.3865L6.49502 14.5L9.38154 11.6135L12.2682 14.5ZM18.6187 11.6133L21.5053 14.5L18.6186 17.3865L15.7321 14.5L18.6187 11.6133ZM16.8867 19.1186L14.0001 22.0051L11.1135 19.1185L14.0001 16.2319L16.8867 19.1186ZM10.3044 25.7007L5.70864 24.5233L9.38154 20.8504L12.2682 23.7371L10.3044 25.7007ZM4.76308 16.2319L7.6496 19.1185L3.9767 22.7914L2.7993 18.1957L4.76308 16.2319ZM3.9767 6.20836L7.64974 9.8814L4.76308 12.7681L2.7993 10.8041L3.9767 6.20836ZM12.2683 5.26294L9.38168 8.1496L5.70892 4.4767L10.3047 3.2993L12.2683 5.26294ZM17.6959 3.2993L22.2915 4.4767L18.6186 8.14946L15.7321 5.26294L17.6959 3.2993ZM23.2372 12.7681L20.3505 9.8814L24.0233 6.20878L25.2007 10.8046L23.2372 12.7681ZM24.0233 22.7914L20.3505 19.1186L23.2372 16.2321L25.2007 18.1957L24.0233 22.7914Z"></path></g></svg>

package/dist/collection/collection-manifest.json

@@ -73,9 +73,11 @@
     "components/gross-payment-chart/gross-payment-chart.js",
     "components/insurance/season-interruption/season-interruption-insurance.js",
     "components/modular-checkout/modular-checkout.js",
+    "components/modular-checkout/sub-components/apple-pay.js",
     "components/modular-checkout/sub-components/bank-account.js",
     "components/modular-checkout/sub-components/card-form.js",
     "components/modular-checkout/sub-components/payment-method-option.js",
+    "components/modular-checkout/sub-components/plaid-payment-method.js",
     "components/modular-checkout/sub-components/saved-payment-methods.js",
     "components/modular-checkout/sub-components/sezzle-payment-method.js",
     "components/modular-checkout/sub-components/summary.js",
@@ -123,7 +125,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.36.2",
+    "version": "4.36.3",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

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: '843caa7d14d4694d78e477cb51d6caac387fdb23' }, h(BankAccountFormSkeleton, { key: 'f4381a71ef5831d159f51472744c7d7a85221464', isReady: this.isReady }), h("div", { key: '8de6e74f3559d94747d8ca942f777977325f16e5', class: "container-fluid p-0", style: {
+        return (h(Host, { key: 'b6cdf5a9320d92a5390daaa0a5218274f2dfc178' }, h(BankAccountFormSkeleton, { key: '286fcc38a26820d166ced0bc886143ed3d880da4', isReady: this.isReady }), h("div", { key: '041fcacff70d7cdfc0c8f41258bd9db18703e4c1', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, h("div", { key: '09e19bc320f2095c9148ddaa2105813071d5f9da', class: "row mb-3" }, h("iframe-input", { key: 'e6262b9fa09d8b30da046dc0c1a01a7bbac33a7d', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '15b85f900ce89f440ecbfe62e61d36d15eff9c2b', class: "row" }, h("iframe-input", { key: '9b4cf61adfd4a5c68e07cc4eb49841727ce2c63d', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+            } }, 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` })))));
     }
     static get is() { return "bank-account-form"; }
     static get states() {

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: 'c43351c7ab1eb6bf413f162634f55007798bb076' }, h(CardFormSkeleton, { key: 'f0a29497de2270108868e892d666b552dea27a1e', isReady: this.isReady }), h("div", { key: '2734b111c1f2f2275435d2141445ac30482946be', class: "container-fluid p-0", style: {
+        return (h(Host, { key: 'd5e5c74e5e3be0bb5a9603a89724d23cc6216d6c' }, h(CardFormSkeleton, { key: 'a1e90d74ca6e72678255590a94937932a9520046', isReady: this.isReady }), h("div", { key: 'bb303552ed581492de8ebb0d83cea751ddd90a09', class: "container-fluid p-0", style: {
                 opacity: this.isReady ? '1' : '0',
                 height: this.isReady ? 'auto' : '0',
-            } }, 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: '080769719aa9b0d6abc9b18c46247eecd6428833', class: "d-flex align-items-start" }, h("div", { key: 'b3a825ed849ec0032d4a9018537f8ffab4b93ca3', class: "flex-fill me-3" }, h("iframe-input", { key: '5f60eb2d3b3e1303e1a0f6a3f0cd60270bb2d0b8', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: 'cfd000502f10593b59608e13f5de7911c546d030', class: "flex-fill me-3" }, h("iframe-input", { key: 'ab2a45264fe5890c171d03000f30720eafe354b5', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: '637516bfd8030e56c9b1e97edfd3a635edb95f20', class: "flex-fill" }, h("iframe-input", { key: 'e407cc2470841fe12b1bdb84bbc8ecfb0165c72d', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+            } }, h("div", { key: '9641c97124a504729b1eba3e8704d8fd3fda7fde', class: "mb-3" }, h("iframe-input", { key: 'a5a73c00c2ac0cd12ef98b155a40108248529fb7', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: 'dad1b83f028745aa8b85a8e552f702d5daa3ac6f', class: "d-flex align-items-start" }, h("div", { key: '5de05029d93a81d5ad8c799135863e8cdd1e8619', class: "flex-fill me-3" }, h("iframe-input", { key: '4ec81652e51187bbaa25600299f8cb89f0c41c5c', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Exp. Month", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '0280f01efdbbfa3542036fa4ee7baec130e42688', class: "flex-fill me-3" }, h("iframe-input", { key: 'b13dba61a6bd18529e70987029592b5b7307e74b', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "Exp. Year", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'edf1e383a148a2d535c4733a2b5af2d8e31e2f43', class: "flex-fill" }, h("iframe-input", { key: 'd63e832db1a089f36909db23cacb110f6571535c', 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,7 +1,6 @@
 import { h } from "@stencil/core";
 import JustifiAnalytics from "../../api/Analytics";
 import { checkPkgVersion } from "../../utils/check-pkg-version";
-import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 import { checkoutStore } from "../../store/checkout.store";
 import { checkoutSummary } from "../../styles/parts";
 import { StyledHost } from "../../ui-components";
@@ -36,23 +35,8 @@ export class Checkout {
     checkoutComplete(_event) {
         this.isSubmitting = false;
     }
-    checkoutError(event) {
+    checkoutError(_event) {
         this.isSubmitting = false;
-        console.error('checkout error', event.detail);
-    }
-    async handleTokenizeSubmit(event) {
-        this.tokenizedPaymentMethod = event.detail.response;
-        if (event.detail.response.error) {
-            this.isSubmitting = false;
-            this.errorEvent.emit({
-                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
-                message: event.detail.response.error.message,
-                severity: ComponentErrorSeverity.ERROR
-            });
-            return;
-        }
-        // Now submit the checkout with the tokenized payment method
-        await this.submitCheckoutWithToken();
     }
     async fillBillingForm(fields) {
         var _a;
@@ -60,12 +44,9 @@ export class Checkout {
         (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.fillBillingForm(fields);
     }
     async validate() {
-        var _a, _b, _c;
-        const tokenizeValidation = await ((_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.validate());
-        const modularValidation = await ((_b = this.modularCheckoutRef) === null || _b === void 0 ? void 0 : _b.validate());
-        return {
-            isValid: ((_c = tokenizeValidation === null || tokenizeValidation === void 0 ? void 0 : tokenizeValidation.isValid) !== null && _c !== void 0 ? _c : true) && (modularValidation !== null && modularValidation !== void 0 ? modularValidation : true)
-        };
+        var _a;
+        const modularValidation = await ((_a = this.modularCheckoutRef) === null || _a === void 0 ? void 0 : _a.validate());
+        return { isValid: modularValidation };
     }
     updateStore() {
         checkoutStore.checkoutId = this.checkoutId;
@@ -78,24 +59,13 @@ export class Checkout {
     async submit(_event) {
         var _a;
         this.isSubmitting = true;
-        // Trigger the tokenize payment method submission
-        (_a = this.tokenizePaymentMethodRef) === null || _a === void 0 ? void 0 : _a.tokenizePaymentMethod();
-    }
-    async submitCheckoutWithToken() {
-        if (!this.tokenizedPaymentMethod || this.tokenizedPaymentMethod.error) {
-            this.isSubmitting = false;
-            return;
-        }
-        // Set the payment token in the store for the modular checkout to use
-        checkoutStore.paymentToken = this.tokenizedPaymentMethod.token;
-        // Submit the checkout
-        this.modularCheckoutRef.submitCheckout(checkoutStore.billingFormFields);
+        (_a = this.modularCheckoutRef) === null || _a === void 0 ? void 0 : _a.submitCheckout(checkoutStore.billingFormFields);
     }
     get showPaymentTypeHeader() {
         return !this.disableCreditCard && !this.disableBankAccount;
     }
     render() {
-        return (h(StyledHost, { key: '516d33e24d351df623d07b8c27113568b2868aa0' }, h("justifi-modular-checkout", { key: 'd75f9484d6b77cf6ddb11f56beaa47ade1dead3f', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: checkoutStore.savePaymentMethod }, h("div", { key: '05984eb0fb57e63d2f89d3eb8d37bcaa3e212547', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '4bf6c78f9052118d24c8258c1926ebeccea304ef', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '772ce7a33a42025e37891dc72bc89ee164dfafa7', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: 'abaee0bf9c978fcaff1941cfa61fa08f64312d60' }, h("justifi-checkout-summary", { key: '8833e3a419f769b6df1f73aaf58fa0f3d761e726' }))), h("div", { key: 'a1f4ed10a8c0e87ab229a4d28893e623c6db6162', class: "col-12 mt-4" }, h("slot", { key: 'c80d7f40db60e1b8cf4f408d44f9c0bbe17bcd24', name: "insurance" })), h("div", { key: '1c75a9d0d5cc74cc5a804218960f5be9e3532bbe', class: "col-12 mt-4" }, h("justifi-header", { key: '8800e249bc4d92cf38611eaefc8230ad5f35c447', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: 'bff61808c64fa281230642d385c6081a51276e9d', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '1bfbac09bc3e91d07e2eb003c38cbf2bc3bea1cd', class: "d-flex flex-column" }, h("section", { key: 'd383841d037516896511f72e40d3eb3fd6f9c272' }, h("div", { key: '5440f8343465f39697ca87f3bcdfe3f5fa511685' }, h("justifi-saved-payment-methods", { key: '23ee2270b2ffecd43cc8d608482a4f77d7ce0ee3' }), h("justifi-sezzle-payment-method", { key: '0a5577cb1070563ba5fb7dd8c3b05977ee340bd6' }), h("justifi-tokenize-payment-method", { key: 'd03e8a971e532781c7d9087345fe1b4a8741f492', 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: '9e488234ee43bed70992e190a23b1faf5fe61308', class: "mt-4" }, h("justifi-button", { key: '31571a8fda37762731679d69b9017e1b553bef8a', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
+        return (h(StyledHost, { key: '9f4a7eca05e031eca99c30bfedd3073855c73529' }, h("justifi-modular-checkout", { key: 'bd15f818c0b214d540c0a17b26701a09c9ad0e3c', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: checkoutStore.savePaymentMethod }, h("div", { key: 'b12acaab9fd003f97bf99e75066e0b8b46dce89e', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '6a8618155c0822bf8c997e8542ecf78a68cbc1c7', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: 'f60d7dbe6115443c313122dfccb6dcb9e0b974c5', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: 'ef2583dd15bf25f344a68ac43cefda0d845438c9' }, h("justifi-checkout-summary", { key: '23b1818736c79e126ae79d8ff1951e44bc84facb' }))), h("div", { key: 'd86495b7da53b9ce7c5a3d65d618e4be3079338f', class: "col-12 mt-4" }, h("slot", { key: '85e34415fa3191a185a0a8da50c16338583e7392', name: "insurance" })), h("div", { key: '8cff610ad6e3535438546aeec85b128ee752f4bb', class: "col-12 mt-4" }, h("justifi-header", { key: 'a2b1c31d40e0c5b7a4f3802312c50cb718b80dbc', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: '6bff6394a243c0a3cb643e0704c44b36001393c3', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: 'deecdfb1d74a74af62c31f1fb88767986c8f142c', class: "d-flex flex-column" }, h("section", { key: '47bc56f1ad8418c65bb1b3f7eba3aedd22d1df0e' }, h("div", { key: '4aac99bba9fbe8acebc652c3c510157f6623dd1e' }, h("justifi-saved-payment-methods", { key: '62fe7c65f1528828bd07746881f3a64e5c8c3f3a' }), h("justifi-sezzle-payment-method", { key: '81fa1dcea2fabf9a1555dc4e9bdb278f09921f01' }), h("justifi-plaid-payment-method", { key: '6e9f782bfe9fbc098084fac5f6effc5d09c3de97' }), h("justifi-tokenize-payment-method", { key: '53616f11a7ec79d9334da2705d85206dd6260b63', 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: '4b61246ea605254aa0e329c3803b9fb725709158', class: "mt-4" }, h("justifi-button", { key: '0e5f46931aa558cea5a81d9ea9c9627a1feeca50', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
     }
     static get is() { return "justifi-checkout"; }
     static get properties() {
@@ -267,8 +237,7 @@ export class Checkout {
             "errorMessage": {},
             "insuranceToggled": {},
             "isSubmitting": {},
-            "serverError": {},
-            "tokenizedPaymentMethod": {}
+            "serverError": {}
         };
     }
     static get events() {
@@ -418,12 +387,6 @@ export class Checkout {
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "submit-event",
-                "method": "handleTokenizeSubmit",
-                "target": undefined,
-                "capture": false,
-                "passive": false
             }];
     }
 }

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

@@ -11,7 +11,7 @@ export class SaveNewPaymentMethod {
         };
     }
     render() {
-        return (h(StyledHost, { key: 'f23a4f992eef86df7ebfa86f4b46b232456016b2' }, h("form-control-checkbox", { key: 'aff52e51dac64207f95e439b26902c772d84963d', label: "Save New Payment Method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
+        return (h(StyledHost, { key: '407e24ad9cd84378dab6a85ed813a8040f93942a' }, h("form-control-checkbox", { key: '73dc01e01c4ca57e26c6897c06a0280fda8c98db', label: "Save New Payment Method", name: "saveNewPaymentMethod", checked: this.isChecked, inputHandler: this.handleCheckboxChange })));
     }
     static get is() { return "justifi-save-new-payment-method"; }
     static get encapsulation() { return "shadow"; }

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: 'da871bcddcfe5ea01aab207d6a4004770b63a18a', class: "payment-method" }, h("div", { key: '06f7919ba9bc826fa8ae8391231fa173098cd212', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: '304f073b7c969c31b17cc44a9e9fa16e00c41aec', 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: '077ad61b1a84963ebaad43397aa7c88211d9dd7e', class: "payment-method" }, h("div", { key: 'e01a2e45c55273cb0ee9774b60504d7098a74cf9', class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { key: 'f34e9fe3f52fbf1acfdc72993259d6f6f58ac470', 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: '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 }) }))))))));
+        return (h(TableWrapper, { key: 'ac27fa8b086e64e53a287f96be1d1212a7c23fc3' }, h(TableComponent, { key: '965b9e4761f686a254297a753b638952181d9758' }, h(TableHead, { key: '41502bb86d87acd8f730f22705d82a2bb4c3787c' }, h(TableHeadRow, { key: '9aa770a8bbb3c9623fde336580dcecda0ee6909e' }, this.checkoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'ad20f6287a2eefd0aa659925cf4be8a03766c1c2' }, h(TableLoadingState, { key: 'bdd7d89bed12c4451199b59e2793cc3d4dbc24a8', columnSpan: this.checkoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '8b89063a5cc78beb42a52375c431e834583ef12a', isEmpty: this.showEmptyState, columnSpan: this.checkoutsTable.columnKeys.length }), h(TableErrorState, { key: 'a557b0a68af21a5501139433f980a6c083536d71', 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: '0ba995e692b70214b1f63f3fbb7e05e76f229304' }, h(TableFootRow, { key: '25703345e36b46ce3a4cd9d09893c744b6db4d86' }, h(TableFootCell, { key: '07f5df6019322cb80053e4c061a2b5cb6ba7187e', colSpan: this.checkoutsTable.columnData.length }, h("pagination-menu", { key: 'daf2dd74a5f24192c9052a2906459a6d2b53544d', 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: '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 }))))));
+        return (h(StyledHost, { key: '05a4d429a1acd7bbaf202872523284e2b2cd3677' }, h("table-filters-menu", { key: 'abf61654a75212537af580f3bfd2646042eaba8a', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: 'f8e5cfe4b0a23723d0df939a1d1873adffcb1da9', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'd9e23e96a7269b3609e690a1e64e8c20bd125cb7', class: "p-2" }, h("form-control-select", { key: 'e1899dbc615be07486bc54f8baa395bee776d8ce', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: 'bedbc26d9d9f6906013ef4b80542d9031822b19c', class: "p-2" }, h("form-control-select", { key: '3bfef7fabeb85a29304e11093005bb1f58b23f41', 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: '0e9e50e18983dad43cfab19f2271678d3f5e6abd' }, h("checkouts-list-core", { key: '6f128cc756477ff64638625d9a9ff9a5b4533948', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'b0c774c4f56f94cd6b4a3dc8651938f9f33ca94e' }, h("checkouts-list-core", { key: 'd524423a791f70c234044f5ba27d7bc3648fc988', 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: '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 }))));
+        return (h("div", { key: 'b5a802e8c418b3b7f3235f43260186084a6ee079' }, 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: 'e19f33cd7106c3c44fb86faeef743c62ff9004b9', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
+        return (h("justifi-dispute-management-core", { key: '8c800827aaa9d549a734ea05698763685e160a98', 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: '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.")))));
+        return (h(StyledHost, { key: '90d2506d5bde2ea478fa3575fc162bb356b67fac' }, this.isLoading && (h("div", { key: '4877ae22d3d8e312640b122c9107b6bdd8f924cb', style: { marginBottom: '8px' } }, h(Skeleton, { key: '31fa0717949bbc6aa49db1c6ae0e324099ae1de2', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: 'ac5179232cb9ee33d3f3e16d9f93536ecfbf46a5', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: 'c22a5e3b257d01f92de7f6188fa0758861abc747', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && (h("div", { key: 'be331b1a5e2fa0baf46bc593ef7ce4f5872abcff', part: text }, h("h1", { key: '8094c16d3b375f28ffe314613f21ae25b63e59ef', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: 'd89ae665e1f9bd99c9338e2132c1dc56e5386696' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: '2786733eac76628019993e13473d1f43c0c395ed', class: "h5" }, "Dispute details"), h("div", { key: '663c28c46136bd56889b6ad0b9bfce9e5adbb590', class: "d-table gap-2" }, h("div", { key: 'dc688fad875d1591dcb7f31d423b61a3df2ff954', class: "d-table-row gap-2" }, h("span", { key: '442db7a6e95524ca6b092794c7a4a4d987c9866e', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: '0a31de8692c9b00f43fcf3c0508e4d00a221d096', 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: '9fe0c1a3d3350c36fca190ae748dafe24d41b5fc', class: "d-table-row gap-2" }, h("span", { key: '12165cb6671519130a5f2e0d8938aaa55e7e3ead', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '4a37ca8a7d64b97142997bb50ec11d737ac6a882', 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: '4d9cf74a8ed26dd84e4ce7325d4b8703352362a4', class: "d-table-row gap-2" }, h("span", { key: '8c0eaa24ebec7703eb18384b0b1f2eae8a684b55', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Dispute ID"), h("span", { key: '238813abf2ea0848e1fe817d5798b9b0d0b78ffc', 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: 'd156a7e9bf0e7214ff2164fc09b12c0b8f1d2b36', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: '7822fd12dfc39bd2aced043956d012fd34cc1b01', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '05132b3a6d1fc3d136dc227008ea1999330cdb96', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_e = this.dispute) === null || _e === void 0 ? void 0 : _e.underReview) && (h("div", { key: 'b04dd0c34f608b75ea3997a9c28ce948fa9dba5c' }, h("h1", { key: 'ac2a13373315703e86247b6707097af7cf2e6757', class: "h4" }, "This payment is disputed and under review"), h("p", { key: '203aed553e01bbaebe44bb370a1d088c149cda06' }, "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: '6325264f8ad7b6678825878ed59f03f90eee421a' }, h("h1", { key: '7b647ed77373884e0751de4fc39403211c249db6', class: "h4" }, "This payment was disputed"), h("p", { key: '2a5c1560d341af9b743234a058a1187f245a2ae8' }, "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: 'a89e7f4d7e8926ed052023c7dbbbaf076a03ed9c' }, h("h1", { key: '534b560aa35dd43ba0eba668904ef70dc1a6954f', class: "h4" }, "This payment was disputed"), h("p", { key: '2381f2f6418b47dce67c498c56d5f3789add57dc' }, "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"; }

package/dist/collection/components/dispute-management/dispute-response/additional-statement.js

@@ -29,7 +29,7 @@ export class AdditionalStatement {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: 'f407dba7be750c75d9bd3163647e62b57f7b32df' }, h("div", { key: '5d690bf3227112c1d6f86d956bb98dd5bb2d585d', class: "row gy-3" }, h("div", { key: 'e12ecbe52d9383b449cde0ffafe32b952c293ad8', class: "col-12" }, h("h2", { key: 'aaeeeed0024985d9be89ce02f252ef999dd9d197', class: "h5", part: heading5 }, "Additional Evidence")), h("div", { key: 'aedfe85e833e387998815246faa21f46184ddcdb', class: "col-12" }, h("form-control-textarea", { key: 'affa35eb587e6b70546f18414d7436bc267c0201', label: "Is there anything else you would like to say about this dispute?", name: "additional_statement", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.additional_statement, inputHandler: this.inputHandler, errorText: this.errors.additional_statement })), h("div", { key: 'ec650c06058b30773dacf1c1f9cafedb526ced90', class: "col-12" }, h("form-control-file-v2", { key: 'd9a75a49a8ada0dfe0b2466ec03a8842c75bddf8', label: "Additional files", name: "uncategorized_file", multiple: true, helpText: "Upload any additional pieces of evidence that have not already been provided.", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_b = this.documentErrors) === null || _b === void 0 ? void 0 : _b.uncategorized_file })))));
+        return (h("div", { key: '3904e1b961f9e1a0683647d306a128efcd7b9202' }, h("div", { key: '37ae13e4b7ad7bc8a18b588c4e591cde9030147e', class: "row gy-3" }, h("div", { key: '2f9b835795f21e4585638ad8be2093642f08b982', class: "col-12" }, h("h2", { key: '9ff1aeb8256ffe97c6300bd48597542519cda0a7', class: "h5", part: heading5 }, "Additional Evidence")), h("div", { key: 'e4c6b9f4624b06103b6c643838a76c4a724e3168', class: "col-12" }, h("form-control-textarea", { key: 'dc9a5cb126a2d6f70cd8d59cdcfcd29f5c4e341b', label: "Is there anything else you would like to say about this dispute?", name: "additional_statement", defaultValue: (_a = this.disputeResponse) === null || _a === void 0 ? void 0 : _a.additional_statement, inputHandler: this.inputHandler, errorText: this.errors.additional_statement })), h("div", { key: 'ba5202a5d8df30f5f4b7217341110646bb76e082', class: "col-12" }, h("form-control-file-v2", { key: '3168fc63d6bd6013821ee335914d916bb680fe42', label: "Additional files", name: "uncategorized_file", multiple: true, helpText: "Upload any additional pieces of evidence that have not already been provided.", onChange: (e) => fileInputHandler(e, this.documents), errorText: (_b = this.documentErrors) === null || _b === void 0 ? void 0 : _b.uncategorized_file })))));
     }
     static get is() { return "justifi-additional-statement"; }
     static get properties() {