@justifi/webcomponents 5.7.6-rc-08 → 5.7.6

package/dist/esm/justifi-checkout-core.entry.js

@@ -0,0 +1,139 @@
+import { r as registerInstance, c as createEvent, h } from './index-kpoIU4v_.js';
+import { f as formatCurrency } from './utils-DIxPWgIk.js';
+import { C as Checkout } from './Checkout-DfRTGCdt.js';
+import { C as ComponentErrorSeverity } from './ComponentError-SdntD1xf.js';
+import { v as validateInsuranceValues, i as insuranceValuesOn, a as insuranceValues, H as Header2 } from './insurance-state-yzV5mr5o.js';
+import { B as Button } from './button-B_viNpoz.js';
+import { S as StyledHost } from './styled-host-B_XBaM7z.js';
+import { S as Skeleton } from './skeleton-MHyzfkPM.js';
+import { A as text, T as checkoutSummary } from './parts-CVGBVdVC.js';
+import { H as Header3 } from './header-3-DfV3YFNS.js';
+import './event-types-CZfYo5-1.js';
+import './index-B9me4yN2.js';
+
+const CheckoutCore = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.submitEvent = createEvent(this, "submit-event");
+        this.errorEvent = createEvent(this, "error-event");
+        this.loaded = createEvent(this, "loaded");
+        this.hasLoadedFonts = false;
+        this.renderState = 'loading';
+        this.creatingNewPaymentMethod = false;
+        this.insuranceToggled = false;
+        this.completeCheckout = async (payment) => {
+            this.complete({
+                payment,
+                onSuccess: this.onSubmitted,
+                onError: this.onError,
+            });
+        };
+        this.onSubmitted = (response) => {
+            this.submitEvent.emit({ response: response });
+            this.renderState = 'success';
+        };
+        this.onError = ({ error, code, severity }) => {
+            this.serverError = error;
+            this.errorEvent.emit({
+                errorCode: code,
+                message: error,
+                severity,
+            });
+            this.renderState = 'error';
+        };
+    }
+    async fillBillingForm(fields) {
+        this.paymentMethodOptionsRef.fillBillingForm(fields);
+    }
+    async validate() {
+        const insuranceValidation = validateInsuranceValues();
+        const { isValid } = await this.paymentMethodOptionsRef.validate();
+        if (!insuranceValidation.isValid || !isValid) {
+            return { isValid: false };
+        }
+        else {
+            return { isValid: true };
+        }
+    }
+    componentWillLoad() {
+        if (this.getCheckout) {
+            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();
+                }
+            });
+        }
+    }
+    fetchData() {
+        this.renderState = 'loading';
+        this.getCheckout({
+            onSuccess: ({ checkout }) => {
+                this.checkout = new Checkout(checkout);
+                const { status } = this.checkout;
+                this.loaded.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,
+                });
+            }
+        });
+    }
+    ;
+    async submit(event) {
+        var _a;
+        event.preventDefault();
+        this.renderState = 'loading';
+        const insuranceValidation = validateInsuranceValues();
+        const payload = await this.paymentMethodOptionsRef.resolvePaymentMethod(insuranceValidation);
+        if (payload.validationError) {
+            this.renderState = 'error';
+        }
+        else if (payload.error) {
+            this.renderState = 'error';
+            this.serverError = payload.error.message;
+            this.onError({
+                code: payload.error.code,
+                error: payload.error.message,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+        else if (payload.token) {
+            this.completeCheckout({ payment_mode: 'ecom', payment_token: payload.token });
+        }
+        else if (((_a = payload.bnpl) === null || _a === void 0 ? void 0 : _a.status) === 'success') {
+            this.completeCheckout({ payment_mode: 'bnpl' });
+        }
+        else {
+            this.renderState = 'error';
+        }
+    }
+    get isLoading() {
+        return this.renderState === 'loading';
+    }
+    get isError() {
+        return this.renderState === 'error';
+    }
+    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 }))));
+    }
+    get summary() {
+        var _a, _b;
+        return (h("section", null, h("div", { class: !this.isLoading && 'visually-hidden' }, h(Skeleton, { height: "24px" })), h("div", { class: this.isLoading && 'visually-hidden' }, h("div", { part: text }, (_a = this.checkout) === null || _a === void 0 ? void 0 : _a.payment_description), h("div", null, h("span", { part: text }, "Total"), "\u00A0", h("span", { part: text }, formatCurrency(+((_b = this.checkout) === null || _b === void 0 ? void 0 : _b.total_amount)))))));
+    }
+    render() {
+        return (h(StyledHost, { key: '2fb8b2c2b543712023c74cf9b41dc57675c89237' }, h("div", { key: 'caba36e076e4162d9c92844f7c0632b5bf678de6', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '6a27d64005d785815d5567894d6e2a6e1e515cf8', class: "col-12", part: checkoutSummary }, h(Header2, { key: '645fe4250331805e86811700b453458f065188bd', text: "Summary", class: "fs-5 fw-bold pb-3" }), this.summary), h("div", { key: 'c49c73eb3462ad17e0344e74be508abe958a9358', class: "col-12" }, h("slot", { key: 'be626bff57c95b92f9853e2e9b63dd9279834142', name: "insurance" })), h("div", { key: '025b0400164935f10d6c79d445bfdcf157290fd6', class: "col-12 mt-4" }, h(Header2, { key: '483b5d53b5cea3ae6fccfbb3aa9d3efe0dc8fcab', text: "Payment", class: "fs-5 fw-bold pb-3" }), h(Header3, { key: '21abbd4d669e351c8ad0a87b7b408a4998948b46', text: "Select payment type", class: "fs-6 fw-bold lh-lg" }), h("div", { key: '9441e97e1bd64b796ebcf1404d4ca04964990982', class: "d-flex flex-column" }, this.paymentType)), h("div", { key: '9db2e4fccff5b868e7d329d9b0be864942adcc3d', class: "col-12" }, h("div", { key: '2eaef4ed6062b27de2516de7b71a056c829f8cab', class: "d-flex justify-content-end" }, h(Button, { key: '505869afa61094d628b58a32749c44f678e4fda3', type: "submit", variant: "primary", onClick: (e) => this.submit(e), disabled: this.isLoading, isLoading: this.isLoading, style: { width: '100%' } }, "Pay"))))));
+    }
+};
+
+export { CheckoutCore as justifi_checkout_core };

package/dist/esm/justifi-checkout.entry.js

@@ -1,119 +1,134 @@
 import { r as registerInstance, c as createEvent, h } from './index-kpoIU4v_.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-C2I-noS-.js';
-import { c as checkoutStore } from './checkout.store-QrBBYQfi.js';
-import { d as checkoutSummary } from './parts-D3G5aVLy.js';
-import { P as PaymentMethodTypes } from './Payment-Bs0-9Lnt.js';
-import { S as StyledHost } from './styled-host-B_XBaM7z.js';
-import './event-types-CZfYo5-1.js';
-import './package-C3HuV_kf.js';
-import './Api-DQM93PRm.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-SdntD1xf.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils-Dccsn9BY.js';
+import { C as CheckoutService } from './checkout.service-BQ2Z7hHe.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-DvajBJj9.js';
+import './Api-Bes3KkG6.js';
 import './config-state-BrllxiM0.js';
 import './index-B9me4yN2.js';
-import './utils-B7jE0g5_.js';
-import './ComponentError-Cjcsf8ku.js';
-import './Refund-4B3c-kLz.js';
+import './utils-DIxPWgIk.js';
+import './Checkout-DfRTGCdt.js';
 import './Pagination-CLHwhyvu.js';
+import './Payment-93PpwzdC.js';
+import './Dispute-7MWRbTXI.js';
+import './Refund-CISeDJoW.js';
 import './Business-BCoP0TAV.js';
 import './helpers-Mu7LQT-w.js';
 import './state-options-BX8GieXu.js';
-import './Dispute-7MWRbTXI.js';
+import './package-DwtqmD1M.js';
 
-const PaymentMethodTypeLabels = {
-    bankAccount: 'New bank account',
-    card: 'New credit or debit card',
+const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({ onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.fetchCheckout(authToken, checkoutId);
+        if (!response.error) {
+            const checkout = response.data;
+            onSuccess({ checkout });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+};
+const makeCheckoutComplete = ({ authToken, checkoutId, service }) => async ({ payment, onSuccess, onError }) => {
+    var _a;
+    try {
+        const response = await service.complete(authToken, checkoutId, payment);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
 };
+
 const Checkout = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.errorEvent = createEvent(this, "error-event");
         this.loadedEvent = createEvent(this, "loaded");
-        this.submitEvent = createEvent(this, "submit-event");
         this.errorMessage = '';
-        this.insuranceToggled = false;
-        this.isSubmitting = false; // This is used to prevent multiple submissions and is different from loading state
-        this.paymentMethodOptions = [];
-        this.savePaymentMethod = false;
-        this.disableBankAccount = false;
-        this.disableBnpl = false;
-        this.disableCreditCard = false;
-        this.disablePaymentMethodGroup = false;
-        this.hideBankAccountBillingForm = false;
-        this.hideCardBillingForm = false;
-    }
-    propChanged() {
-        this.updateStore();
-    }
-    connectedCallback() {
-        if (this.authToken && this.checkoutId) {
-            this.updateStore();
-        }
     }
     componentWillLoad() {
         checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
+        this.initializeGetCheckout();
     }
     disconnectedCallback() {
         var _a;
         (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
     }
-    savePaymentMethodChanged(event) {
-        this.savePaymentMethod = event.detail;
-    }
-    checkoutComplete(_event) {
-        this.isSubmitting = false;
-    }
-    checkoutError(event) {
-        this.isSubmitting = false;
-        console.error('checkout error', event.detail);
+    ;
+    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,
+            });
+        }
     }
-    paymentMethodOptionSelected(event) {
-        checkoutStore.selectedPaymentMethod = event.detail.id;
+    propChanged() {
+        this.initializeGetCheckout();
     }
     async fillBillingForm(fields) {
-        checkoutStore.billingFormFields = fields;
+        this.checkoutCoreRef.fillBillingForm(fields);
     }
     async validate() {
-        var _a;
-        return { isValid: await ((_a = this.modularCheckoutRef) === null || _a === void 0 ? void 0 : _a.validate()) };
-    }
-    updateStore() {
-        checkoutStore.checkoutId = this.checkoutId;
-        checkoutStore.authToken = this.authToken;
-        checkoutStore.disableCreditCard = this.disableCreditCard;
-        checkoutStore.disableBankAccount = this.disableBankAccount;
-        checkoutStore.disableBnpl = this.disableBnpl;
-        checkoutStore.disablePaymentMethodGroup = this.disablePaymentMethodGroup;
-    }
-    async submit(_event) {
-        this.isSubmitting = true;
-        this.modularCheckoutRef.submitCheckout(checkoutStore.billingFormFields);
-    }
-    get canSavePaymentMethod() {
-        return checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card || checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount;
-    }
-    get showBillingForm() {
-        return (checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && !this.hideCardBillingForm)
-            || (checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount && !this.hideBankAccountBillingForm);
-    }
-    get showBillingFormSection() {
-        return checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card || checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount;
-    }
-    get showPaymentTypeHeader() {
-        return !this.disableCreditCard && !this.disableBankAccount;
-    }
-    get showPostalCodeForm() {
-        return checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && this.hideCardBillingForm;
+        const { isValid } = await this.checkoutCoreRef.validate();
+        return { isValid };
     }
     render() {
-        return (h(StyledHost, { key: '4fb1d82b065de6c1e4651a246a53f8e58451d6f6' }, h("justifi-modular-checkout", { key: '232cf32890422f474cf929b7c7ed7246d7b39c75', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: this.canSavePaymentMethod && this.savePaymentMethod }, h("div", { key: '677ad110b05520be3b729995657086f0f6cbf337', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '458c84541dd154dd8b4ad1d0f2320e2308cc1785', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '440a7d1ad7b21da3db66e6c6f1f9afefb434a089', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '99bd431a8f70ce6e764cc04da3d0aaae6f0ebcbe' }, h("justifi-checkout-summary", { key: '52da663e5bed35f0deb220800c7ede8835a3671b' }))), h("div", { key: 'e95b1c6830d20c5af57c558badb04d07d3c48f23', class: "col-12 mt-4" }, h("slot", { key: '527d58d4806d2e1bbcba499e97ab65f6c9c7efb9', name: "insurance" })), h("div", { key: '69d1319d1e05852de4f5566ad3be20bc9a6ee499', class: "col-12 mt-4" }, h("justifi-header", { key: '1682f909f22172a44da54118aefe428f92908e91', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: '7942a12143bea0235705969737e11d59bc5180e1', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '497664d455695693c4f9a1a4465c62ad4d5b6bdf', class: "d-flex flex-column" }, h("section", { key: 'd3da4c18b430e1b36f7b9ba20be517994e763b5e' }, h("div", { key: '1cc0f0462a0f70d2acc4c9fdee25fbb2fe953c22' }, h("justifi-saved-payment-methods", { key: '576da27df84d67bc69f2d95f00a6c440fa73f7ed' }), h("justifi-sezzle-payment-method", { key: '6544a3a250ee012870a9edce71dd763553d44554' }), !this.disableCreditCard && (h("div", { key: '79050f768d8d76c4d882bed667e85391c230a960' }, h("payment-method-option", { key: '5a6c1dc583766707e6215203fdba176bd65b501d', paymentMethodOptionId: PaymentMethodTypes.card, isSelected: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card, clickHandler: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.card; }, radioButtonHidden: this.disableCreditCard, label: PaymentMethodTypeLabels[PaymentMethodTypes.card] }), checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && (h("div", { key: '5e6f0b854191a9a5db8936b2e30518fba251e478', class: "mt-4 mb-4" }, h("justifi-card-form", { key: '6c3f72f27dfe36924fe94ab4f7c79b6b9ff19b47' }))))), !this.disableBankAccount && (h("div", { key: 'f6a88103b2c30e4dd10e733b19aaa29a7a44430c' }, h("payment-method-option", { key: '67ef047a8caad5bc389238d54bb3d7056ca4b9e6', paymentMethodOptionId: PaymentMethodTypes.bankAccount, isSelected: checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount, clickHandler: () => { checkoutStore.selectedPaymentMethod = PaymentMethodTypes.bankAccount; }, radioButtonHidden: this.disableBankAccount, label: PaymentMethodTypeLabels[PaymentMethodTypes.bankAccount] }), checkoutStore.selectedPaymentMethod === PaymentMethodTypes.bankAccount && (h("div", { key: 'e67924184fc43811523081711f59865a01d7cf9f', class: "mt-4 mb-4" }, h("justifi-bank-account-form", { key: 'a01cdfe8be1bc98d4c0f75c2a9f2ca1cce519042' }))))))))), this.showBillingFormSection && (h("div", { key: 'a15f1202548c7d6c302c2b2827168a6a119f8634', class: "col-12 mt-4" }, this.showBillingForm && (h("justifi-header", { key: 'ee654c812cb097449937da4253e191de1ee669d5', text: "Billing Address", level: "h2", class: "fs-5 fw-bold pb-3" })), this.showPostalCodeForm && (h("justifi-postal-code-form", { key: '2a5736e6da3354f7a9d1a5b8870a2f61c09c2592' })), this.showBillingForm && (h("justifi-billing-information-form", { key: '7dd63931e75d7583b4f51a1f6bb2b1e84a46e078' })))), h("div", { key: '54aeb0f07f574ee004ec02cd279265202cffa9bf', class: "col-12" }, this.canSavePaymentMethod && (h("justifi-save-new-payment-method", { key: '2e010be22091cee1ebc4353d5dac3b49639175e7' }))), h("div", { key: '71df812c8a922ae8b447d647f69675230c092db9', class: "mt-4" }, h("justifi-button", { key: '057cd18c6235c73cc69ca85e9cb35a2a614a4d9a', text: "Pay", type: "submit", variant: "primary", clickHandler: (e) => this.submit(e), disabled: this.isSubmitting, isLoading: this.isSubmitting, customStyle: { width: '100%', textAlign: "center" } }))))));
+        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" }))));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],
-        "checkoutId": ["propChanged"],
-        "disableCreditCard": ["propChanged"],
-        "disableBankAccount": ["propChanged"],
-        "disableBnpl": ["propChanged"],
-        "disablePaymentMethodGroup": ["propChanged"]
+        "checkoutId": ["propChanged"]
     }; }
 };
 

package/dist/esm/justifi-checkouts-list-filters.entry.js

@@ -1,14 +1,15 @@
 import { r as registerInstance, h } from './index-kpoIU4v_.js';
 import './config-state-BrllxiM0.js';
-import './utils-B7jE0g5_.js';
-import './ComponentError-Cjcsf8ku.js';
-import { I as ICheckoutStatus, a as ICheckoutPaymentModeParam } from './Refund-4B3c-kLz.js';
+import './utils-DIxPWgIk.js';
+import './ComponentError-SdntD1xf.js';
+import { I as ICheckoutStatus, a as ICheckoutPaymentModeParam } from './Checkout-DfRTGCdt.js';
 import './Pagination-CLHwhyvu.js';
-import './Payment-Bs0-9Lnt.js';
+import './Payment-93PpwzdC.js';
+import './Refund-CISeDJoW.js';
 import './Business-BCoP0TAV.js';
 import './Dispute-7MWRbTXI.js';
 import { f as filterParams, p as propsParams, c as clearParams } from './checkouts-list-params-state-SMXQIZTt.js';
-import { e as checkoutsListFilterMenu, s as statusCheckoutsListFilterParam, p as paymentModeCheckoutsListFilterParam } from './parts-D3G5aVLy.js';
+import { d as checkoutsListFilterMenu, s as statusCheckoutsListFilterParam, p as paymentModeCheckoutsListFilterParam } from './parts-CVGBVdVC.js';
 import { S as StyledHost } from './styled-host-B_XBaM7z.js';
 import './event-types-CZfYo5-1.js';
 import './index-B9me4yN2.js';
@@ -51,7 +52,7 @@ const CheckoutsListFilters = class {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '5474a09b729c816bafb47101dbf5a25aff92eb1b' }, h("table-filters-menu", { key: '92e46a05e67bdf84b74cd644c1b89d0fc4c86af9', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: 'd8562876f8a0c1d85caa5a298cccdb1143bd7512', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '4162644cf10861d91a79dc07f845dd21a6c8d6a5', class: "p-2" }, h("form-control-select", { key: '2b13ef4af25f6ac3865f3b0edde91929655537bf', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: '9aee7f453be147b03a548fe9ea9bd9bcc6a233aa', class: "p-2" }, h("form-control-select", { key: '8f375d5660c3414e5f3796e02694fa46ed761871', 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: 'da4917a79b2d4e5a00627a00036839caeeee1ce1' }, h("table-filters-menu", { key: 'ad310d55d131b4fcb64ccdcaedcfcd665843cee4', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: '9989d0a3e5b6672fb5e78d2c368380768fc34167', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'a6182923403cfa9a4d7217e436acc6ee2133e270', class: "p-2" }, h("form-control-select", { key: '4b0314046130feae009a058e180108e9ea848cdc', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: 'a9b53a160ef84ca33003c481c4ab07b173d64825', class: "p-2" }, h("form-control-select", { key: 'ad304f8d8843d386feb90cc1a82259a168445331', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode, disabled: !!this.paymentMode, part: paymentModeCheckoutsListFilterParam }))))));
     }
 };
 

package/dist/esm/justifi-checkouts-list.entry.js

@@ -1,26 +1,27 @@
 import { r as registerInstance, c as createEvent, h } from './index-kpoIU4v_.js';
 import './config-state-BrllxiM0.js';
-import './utils-B7jE0g5_.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-Cjcsf8ku.js';
-import { C as Checkout } from './Refund-4B3c-kLz.js';
+import './utils-DIxPWgIk.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-SdntD1xf.js';
+import { C as Checkout } from './Checkout-DfRTGCdt.js';
 import './Pagination-CLHwhyvu.js';
-import './Payment-Bs0-9Lnt.js';
+import './Payment-93PpwzdC.js';
+import './Refund-CISeDJoW.js';
 import './Business-BCoP0TAV.js';
 import './Dispute-7MWRbTXI.js';
-import { g as getErrorCode, a as getErrorMessage } from './utils-BeQLScSm.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-C2I-noS-.js';
-import { C as CheckoutService } from './checkout.service-CXeKDZTF.js';
-import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccounts-C62B2OC_.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils-Dccsn9BY.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-DvajBJj9.js';
+import { C as CheckoutService } from './checkout.service-BQ2Z7hHe.js';
+import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccounts-0PmjUDEa.js';
 import { S as StyledHost } from './styled-host-B_XBaM7z.js';
 import './event-types-CZfYo5-1.js';
-import { d as defaultColumnsKeys } from './checkouts-table-Djb7Yj6O.js';
+import { d as defaultColumnsKeys } from './checkouts-table-YyKWgXbv.js';
 import './index-B9me4yN2.js';
 import './helpers-Mu7LQT-w.js';
 import './state-options-BX8GieXu.js';
-import './package-C3HuV_kf.js';
-import './Api-DQM93PRm.js';
-import './badge-D-vrtiQR.js';
-import './parts-D3G5aVLy.js';
+import './package-DwtqmD1M.js';
+import './Api-Bes3KkG6.js';
+import './badge-BRPxcFAe.js';
+import './parts-CVGBVdVC.js';
 
 const makeGetCheckouts = ({ accountId, authToken, service }) => async ({ params, onSuccess, onError }) => {
     var _a, _b;
@@ -106,7 +107,7 @@ const CheckoutsList = class {
         }
     }
     render() {
-        return (h(StyledHost, { key: '41bf633467138b6af13b1c02ccf1e1016ec54bfe' }, h("checkouts-list-core", { key: 'cd3ca431258ad73e701fe74612ecdf2c0f2a1bda', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'e448042916ca168416a16f8fb27daca1e240a58c' }, h("checkouts-list-core", { key: '7a20ec17bb485a651bb14aee980dee8a9b6bf809', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

package/dist/esm/justifi-details.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-kpoIU4v_.js';
-import { E as ErrorState } from './utils-CBJo9jNE.js';
-import './parts-D3G5aVLy.js';
+import { E as ErrorState } from './utils-DOW3rBEH.js';
+import './parts-CVGBVdVC.js';
 
 const Details = class {
     constructor(hostRef) {

package/dist/esm/justifi-dispute-management-core.entry.js

@@ -49,7 +49,7 @@ const DisputeManagementCore = class {
         });
     }
     render() {
-        return (h("div", { key: 'c85852cbd1169f371eb30ae06b6a2a564a15ece7' }, 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: '055958d36a7cd65fe4eb34ae51ec399eb33d7d1b' }, 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 watchers() { return {
         "getDispute": ["updateOnPropChange"]

package/dist/esm/justifi-dispute-management.entry.js

@@ -1,17 +1,18 @@
 import { r as registerInstance, c as createEvent, h } from './index-kpoIU4v_.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-Cjcsf8ku.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-C2I-noS-.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-SdntD1xf.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-DvajBJj9.js';
 import { a as Dispute } from './Dispute-7MWRbTXI.js';
-import { g as getErrorCode, a as getErrorMessage } from './utils-BeQLScSm.js';
-import { D as DisputeService } from './dispute.service-DWs_TX-m.js';
-import './package-C3HuV_kf.js';
-import './Api-DQM93PRm.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils-Dccsn9BY.js';
+import { D as DisputeService } from './dispute.service-Bmw6fgc6.js';
+import './package-DwtqmD1M.js';
+import './Api-Bes3KkG6.js';
 import './config-state-BrllxiM0.js';
 import './index-B9me4yN2.js';
-import './utils-B7jE0g5_.js';
-import './Refund-4B3c-kLz.js';
+import './utils-DIxPWgIk.js';
+import './Checkout-DfRTGCdt.js';
 import './Pagination-CLHwhyvu.js';
-import './Payment-Bs0-9Lnt.js';
+import './Payment-93PpwzdC.js';
+import './Refund-CISeDJoW.js';
 import './Business-BCoP0TAV.js';
 import './helpers-Mu7LQT-w.js';
 import './state-options-BX8GieXu.js';
@@ -86,7 +87,7 @@ const DisputeManagement = class {
         }
     }
     render() {
-        return (h("justifi-dispute-management-core", { key: '4087eb105a046a3cc194d9f25c80fa11298fa0a2', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
+        return (h("justifi-dispute-management-core", { key: '0eb7f0d74fa19e79633a3ec2f7ab7945be3fe0fe', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
     }
     static get watchers() { return {
         "disputeId": ["propChanged"],

package/dist/esm/justifi-dispute-notification_3.entry.js

@@ -1,26 +1,27 @@
 import { r as registerInstance, c as createEvent, h } from './index-kpoIU4v_.js';
-import { f as formatCurrency } from './utils-B7jE0g5_.js';
-import { z as text, am as heading4 } from './parts-D3G5aVLy.js';
-import { B as Button } from './button-DxM4-mlD.js';
+import { f as formatCurrency } from './utils-DIxPWgIk.js';
+import { A as text, ak as heading4 } from './parts-CVGBVdVC.js';
+import { B as Button } from './button-B_viNpoz.js';
 import { S as StyledHost } from './styled-host-B_XBaM7z.js';
-import { S as Skeleton } from './skeleton-CZfDofm6.js';
+import { S as Skeleton } from './skeleton-MHyzfkPM.js';
 import './event-types-CZfYo5-1.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-Cjcsf8ku.js';
-import { g as getErrorCode, a as getErrorMessage } from './utils-BeQLScSm.js';
-import { D as DisputeService } from './dispute.service-DWs_TX-m.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes } from './ComponentError-SdntD1xf.js';
+import { g as getErrorCode, a as getErrorMessage } from './utils-Dccsn9BY.js';
+import { D as DisputeService } from './dispute.service-Bmw6fgc6.js';
 import { D as DisputeManagementClickActions } from './event-types-Bg2SZArf.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-C2I-noS-.js';
-import './Api-DQM93PRm.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-DvajBJj9.js';
+import './Api-Bes3KkG6.js';
 import './config-state-BrllxiM0.js';
 import './index-B9me4yN2.js';
-import './Refund-4B3c-kLz.js';
+import './Checkout-DfRTGCdt.js';
 import './Pagination-CLHwhyvu.js';
-import './Payment-Bs0-9Lnt.js';
+import './Payment-93PpwzdC.js';
 import './Dispute-7MWRbTXI.js';
+import './Refund-CISeDJoW.js';
 import './Business-BCoP0TAV.js';
 import './helpers-Mu7LQT-w.js';
 import './state-options-BX8GieXu.js';
-import './package-C3HuV_kf.js';
+import './package-DwtqmD1M.js';
 
 const makeUpdateDisputeResponse = ({ authToken, disputeId, service }) => async ({ payload, onSuccess, onError, final = () => { } }) => {
     var _a;
@@ -141,7 +142,7 @@ const DisputeNotification = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h(StyledHost, { key: '0f1028825a7a96a06e7219518ffed54bc0db1b2b' }, this.isLoading && (h("div", { key: 'f4b704182a5a7085827854634d38c56423cc2e1b', style: { marginBottom: '8px' } }, h(Skeleton, { key: 'b2062d8b683ab110c26fc30f1600c4500f668d87', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: 'b5d2afe1fdd2e5ee0ec60048a48778bcfa6c78d3', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: '1e87c8936b3f2e26e680786927c5a4609aca0b83', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && (h("div", { key: '49090493e3921353b7a830397795496bb234d112', part: text }, h("h1", { key: 'fd7b56a7cfeaa6820bf2cc121575314d075b5a83', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: '72ba296695928baca8f7c5c3b1f858c596efedb2' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: 'cce733ff1bbca7a9530a442035cbae2995e018e7', class: "h5" }, "Dispute details"), h("div", { key: '28b7f081e345112d99c52d05f205734995617253', class: "d-table gap-2" }, h("div", { key: 'd9476d8d0adfa3c6eccad229e94cd3824a720c7d', class: "d-table-row gap-2" }, h("span", { key: '4d9e0714eee778c326ee1d70a32f79d90d3d4b09', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: 'b227edcf9b4b65b790d8aa98021d2662a12855bc', 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: 'b1b1cdaac5482f565a6f26af71c0b526b8c19f4e', class: "d-table-row gap-2" }, h("span", { key: '0a479a9de96cce6e42bec90a17affe2c93ced44f', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '5d5020dda571f4465e2a358880ad5f20bc6171ea', 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: 'a5f42c3fcbb5d14f8479d0a576d31a50f8fc6441', class: "d-table-row gap-2" }, h("span", { key: '280fca5a101eb0e823eb9ccc13c746ac7ed62069', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Dispute ID"), h("span", { key: '4dfc0b9a295ffc804b708d3590358256009e5376', 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: '654e7baccd08628bc90d050bad108011b49f9972', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: 'd0817cdb23bf33086c6ce5122f4ed5388027d96c', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '5446bef44a0ca747692d59fd5490409d00a9e285', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_e = this.dispute) === null || _e === void 0 ? void 0 : _e.underReview) && (h("div", { key: '17fbc5902badc4230c5485b326f480180c844768' }, h("h1", { key: 'fefa0234306588d9e7f56733872bf8c9793f51dd', class: "h4" }, "This payment is disputed and under review"), h("p", { key: 'eaad72aa8d9f65ca296379a2800180878ec8a7e5' }, "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: 'ec1b0d728a7518f913c2a69976fa1f5fc8f76c74' }, h("h1", { key: '9d42fad15fbeee507e2f364c3a35f143ff7599e2', class: "h4" }, "This payment was disputed"), h("p", { key: '3b728a5544fe17a6c58c12f7e8eef290022945b6' }, "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: '6d1813508a657265546fbef00bd1e8f46ffaf740' }, h("h1", { key: 'de981fc2e06e860f47146647975965a903a39b55', class: "h4" }, "This payment was disputed"), h("p", { key: '4e57ab86518bd678a3a5402b712d40d573b3a970' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
+        return (h(StyledHost, { key: '1db05d5d0a2a5d6e6b78cc59993505bd4d76ebe7' }, this.isLoading && (h("div", { key: '9c89f30960ddf0be3d71c966ca57b569f3ff9d4a', style: { marginBottom: '8px' } }, h(Skeleton, { key: 'e5a2a2bc3ac92eb5ad4195fc88033213a8ece47a', height: '28px', width: '70%', styles: { marginBottom: '16px' } }), h(Skeleton, { key: '0bc0a4d2fada5d327e1931c1fa0d14e96bffdb3e', height: '18px', styles: { marginBottom: '8px' } }), h(Skeleton, { key: '3166b2cfc5b45d26e5df4895eacf531e9e65007e', height: '18px', styles: { marginBottom: '8px' } }))), ((_a = this.dispute) === null || _a === void 0 ? void 0 : _a.needsResponse) && (h("div", { key: 'e466615b698a19c1732cb121e62bb1e3c907dd8c', part: text }, h("h1", { key: 'e0dcf51f9f23aaa638c4262279e9e09a51ea4fd3', class: "h4", part: heading4 }, "This payment is disputed"), h("p", { key: 'f6223902379663abfa854238d4da032c0c05c6db' }, "The cardholder is disputing this payment. You may accept this dispute, or proceed to provide evidence in a counter dispute."), h("h2", { key: '2f020f828b56ffad6d304a8b1dbf456fd2bc1566', class: "h5" }, "Dispute details"), h("div", { key: 'd039822e36ebbda4e16260d475a38099bffb2987', class: "d-table gap-2" }, h("div", { key: 'f500c5dbe0db03f17eadcecd63fb391650b5dcfd', class: "d-table-row gap-2" }, h("span", { key: '663fd1b756692e84a6c1777f3283964cc28d89c2', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Amount"), h("span", { key: 'b6740f9c893af1894f41854ccc3ad8f3ea4a078a', 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: '3ed0b2ad6671aae4ab0e8ca39cff0a5a8b9dd372', class: "d-table-row gap-2" }, h("span", { key: '92567e18ffca620b909602b4e3384a633177e804', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Reason"), h("span", { key: '96f921be894d079bfe920d58c1c1b219a8a4908b', 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: '0d378be43be30460b7f4a029f1b15329ec97e8e4', class: "d-table-row gap-2" }, h("span", { key: '77a49b1a543318be776fc5d21e341abf8670527a', part: "detail-section-item-title", class: "fw-bold d-table-cell pe-4" }, "Dispute ID"), h("span", { key: '41de3a05cbaa74975c010de2fad237321a4f58c0', 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: '3f0b6a369b04389428bad7de8b71d3f8718d538b', class: "d-flex gap-2 mt-4 justify-content-end" }, h(Button, { key: '07ffa21453cf14537441283c280e3a32bc8a7391', variant: "secondary", onClick: () => this.acceptDispute() }, "Accept dispute"), h(Button, { key: '977c1a385c094d0fa3dac86ecdc128c5b6a76579', variant: "primary", onClick: () => this.initiateRespondToDispute() }, "Counter dispute")))), ((_e = this.dispute) === null || _e === void 0 ? void 0 : _e.underReview) && (h("div", { key: '9c58e1b63217f79cddd6bcf2cbba875a321c6c32' }, h("h1", { key: 'c8feb6609b2da8a8a7ec340cd184cb80ffabdd1f', class: "h4" }, "This payment is disputed and under review"), h("p", { key: 'a1498ee9a3055028bb5157926ad59b12aeee2925' }, "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: '7721a8e37b1b8ad4cc535f83a16c2a5d31c7d70c' }, h("h1", { key: '0669edf9efde01f89a75751286cb4ce4601dfc8a', class: "h4" }, "This payment was disputed"), h("p", { key: '41a2645ecd146432c7b6c7db48acafa538e6c6a7' }, "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: '53bcf1dc1ca865fd0d1aa297794759099d3e5736' }, h("h1", { key: '3c4e05422f28d10620577a3f35c3d182afca6482', class: "h4" }, "This payment was disputed"), h("p", { key: '7f82acac107d1ae357e5ced092f9f7d23ca80bd2' }, "The cardholder disputed this payment and the card issuer has settled it in their favor.")))));
     }
 };
 
@@ -197,7 +198,7 @@ const DisputeResponse = class {
         }
     }
     render() {
-        return (h(StyledHost, { key: 'dbdfd59a21c7e8ea4dfdaecb91f885f82540a27c' }, h("justifi-dispute-response-core", { key: '3cff38e5995f0033c45c54fa195ffeebc27e189e', "onError-event": this.handleErrorEvent, "dispute-id": this.disputeId, disputeResponse: this.disputeResponse, createDisputeEvidence: this.createDisputeEvidence, updateDisputeResponse: this.updateDisputeResponse, submitDisputeResponse: this.submitDisputeResponse })));
+        return (h(StyledHost, { key: 'ccac9f466cce91e00a39d8130ebf7ff9266ed34e' }, h("justifi-dispute-response-core", { key: '45f6c536728230fce1b7dd9b727d857b4f263df5', "onError-event": this.handleErrorEvent, "dispute-id": this.disputeId, disputeResponse: this.disputeResponse, createDisputeEvidence: this.createDisputeEvidence, updateDisputeResponse: this.updateDisputeResponse, submitDisputeResponse: this.submitDisputeResponse })));
     }
     ;
     static get watchers() { return {
@@ -365,7 +366,7 @@ const DisputeResponseCore = class {
         return this.currentStep === 0;
     }
     render() {
-        return (h("div", { key: '20d075178a9d88cd73be32e52f8df6d3d360f8d7', class: "row gy-3" }, h("div", { key: '6c1bc735f1a15709c596b5bea7cc3ce50e9a73f5', class: "col-12" }, h("h1", { key: '27a0804924937ee7a8d01265bd0da2d9dd31d301', class: "h4", part: heading4 }, "Counter dispute")), h("div", { key: 'b60822e91425c5c4af003169f47fd725daf9fb0f', class: "col-12" }, this.currentStepComponent), h("div", { key: 'd1be3f6be53de37836275067070cf4b5a2eb3e4a', class: "col-12" }, h("div", { key: '48c8725d8de8b658e59ccfa851a6af6638e19ca5', class: "d-flex gap-2 mt-4 justify-content-end" }, this.isFirstStep ? (h(Button, { variant: "secondary", onClick: () => this.onCancel(), disabled: this.isLoading, isLoading: this.isLoading }, "Cancel")) : (h(Button, { variant: "secondary", onClick: () => this.onBack(), disabled: this.isLoading, isLoading: this.isLoading }, "Back")), this.isLastStep ? (h(Button, { variant: "primary", onClick: () => this.onSubmit(), disabled: this.isLoading, isLoading: this.isLoading }, "Submit Counter Dispute")) : (h(Button, { variant: "primary", onClick: () => this.onNext(), disabled: this.isLoading, isLoading: this.isLoading }, "Next"))))));
+        return (h("div", { key: 'c01224655927f38fbe19920656dfcbdd832708cc', class: "row gy-3" }, h("div", { key: '86f297470d848fec04a8f2e28cb57e497c840ca0', class: "col-12" }, h("h1", { key: '57c00af581c27dc5b2793c3acda3985dba47879d', class: "h4", part: heading4 }, "Counter dispute")), h("div", { key: '0b669232373f4f9a33ed49c5ba7235edb47765f1', class: "col-12" }, this.currentStepComponent), h("div", { key: 'f61fde58ce2876513ee8d45b58b85433337de4f9', class: "col-12" }, h("div", { key: '4c97586d7b9961a50e629425f7caba4fe96bbf27', class: "d-flex gap-2 mt-4 justify-content-end" }, this.isFirstStep ? (h(Button, { variant: "secondary", onClick: () => this.onCancel(), disabled: this.isLoading, isLoading: this.isLoading }, "Cancel")) : (h(Button, { variant: "secondary", onClick: () => this.onBack(), disabled: this.isLoading, isLoading: this.isLoading }, "Back")), this.isLastStep ? (h(Button, { variant: "primary", onClick: () => this.onSubmit(), disabled: this.isLoading, isLoading: this.isLoading }, "Submit Counter Dispute")) : (h(Button, { variant: "primary", onClick: () => this.onNext(), disabled: this.isLoading, isLoading: this.isLoading }, "Next"))))));
     }
 };