@justifi/webcomponents 5.7.6-rc-04 → 5.7.6-rc-05

package/dist/esm/{justifi-checkout-summary_5.entry.js → justifi-button_5.entry.js}

@@ -1,34 +1,62 @@
-import { r as registerInstance, h, c as createEvent, H as Host, a as getElement } from './index-N3w5zrz2.js';
-import { D as text, r as radioListItem } from './parts-CKg_luIy.js';
-import { f as formatCurrency } from './utils-Cu5hITuT.js';
-import { c as checkoutStore, o as onChange } from './checkout.store-td03RV8y.js';
-import { S as StyledHost } from './styled-host-DtvbNFVU.js';
+import { r as registerInstance, h, c as createEvent, H as Host, g as getElement } from './index-kpoIU4v_.js';
+import { S as StyledHost } from './styled-host-B_XBaM7z.js';
+import { B as Button } from './button-DxM4-mlD.js';
+import { z as text, r as radioListItem } from './parts-D3G5aVLy.js';
+import { f as formatCurrency } from './utils-B7jE0g5_.js';
+import { c as checkoutStore, o as onChange } from './checkout.store-QrBBYQfi.js';
 import './event-types-CZfYo5-1.js';
-import { J as JustifiAnalytics, c as checkPkgVersion } from './check-pkg-version-CwPXpnQZ.js';
-import './config-state-B3mtRA6f.js';
-import './dinero-DizZAUMY.js';
+import { H as Header1 } from './header-1-B0PFwGib.js';
+import { H as Header2, b as insuranceValuesOn, i as insuranceValues } from './insurance-state-DQH40x6F.js';
+import { H as Header3 } from './header-3-D3gxg6YU.js';
+import { J as JustifiAnalytics, c as checkPkgVersion } from './check-pkg-version-B7MJjFP4.js';
+import './config-state-BrllxiM0.js';
 import { C as ComponentErrorSeverity, a as ComponentErrorCodes, b as ComponentErrorMessages } from './ComponentError-Cjcsf8ku.js';
-import { I as ICheckoutStatus } from './Refund-DBHZkemk.js';
+import { I as ICheckoutStatus } from './Refund-4B3c-kLz.js';
 import './Pagination-CLHwhyvu.js';
+import './Payment-Bs0-9Lnt.js';
 import './Business-BCoP0TAV.js';
-import './Dispute-BH0Xfn-F.js';
+import './Dispute-7MWRbTXI.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils-BeQLScSm.js';
-import { C as CheckoutService } from './checkout.service-BgDCPjQU.js';
-import { b as insuranceValuesOn, h as hasInsuranceValueChanged, i as insuranceValues } from './insurance-state-BQks6cMA.js';
-import { C as CardBrandLabels } from './payment-method-option-utils-zFDtQrgQ.js';
-import './index-BAq5IUBW.js';
-import './package-HlNEzyiZ.js';
-import './Api-BCeKXDaf.js';
-import './_commonjsHelpers-BFTU3MAI.js';
+import { C as CheckoutService } from './checkout.service-CXeKDZTF.js';
+import './index-B9me4yN2.js';
+import './package-BLtzn9pE.js';
+import './Api-DQM93PRm.js';
 import './helpers-Mu7LQT-w.js';
 import './state-options-BX8GieXu.js';
 
+const JustifiButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.variant = 'primary';
+        this.type = 'button';
+    }
+    render() {
+        return (h(StyledHost, { key: '89057d5d72b67b613e4846165ea8d2bf5c79482d' }, h(Button, { key: '2bfa0c22898e703a36fb59b1060da35b362f6efa', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
+    }
+};
+
 const Summary = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(StyledHost, { key: 'fe4584497faaf589819dd60c5310eb427518d8c6' }, h("section", { key: 'ca55b0c0feea790e13ac680b955e64565633e7bd' }, h("div", { key: 'ae82878dc9010db77bc564e4ba1cc8fc6c04e7f2' }, h("div", { key: 'daf8a8514879d64d3463b5394e61b19cf8445fb9', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: '44845dca1b6cb8d814c48279c03bc6694175e7a1' }, h("span", { key: 'eebc881d4693cab79fa25edb7563979c21d049a3', part: text }, "Total"), "\u00A0", h("span", { key: 'fbf572ba41fb575aa83c1f56d35a294e0855dc9c', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
+        return (h(StyledHost, { key: 'dbe9b02315fe34f0765b04d1f56758eeafbec247' }, h("section", { key: '8d55dbe1ed13f4d565eac71600dc53c4d29f9d2f' }, h("div", { key: 'd3b27f48a23b448680abae596531905ea198b4b0' }, h("div", { key: '1df204481e044414825de33640d3b13e73bd44a2', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: '7734088f6171a77e56cbf3434de7a892949812d4' }, h("span", { key: 'ed855b2d6f02d316dcdc5e8c6d3309b4919c560e', part: text }, "Total"), "\u00A0", h("span", { key: 'c352cf6089c2c4d8b2fc57776acd45991880fe3f', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
+    }
+};
+
+const Header = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.levels = {
+            h1: Header1,
+            h2: Header2,
+            h3: Header3,
+        };
+        this.level = 'h1';
+    }
+    render() {
+        const HeaderComponent = this.levels[this.level];
+        return (h(StyledHost, { key: '0ea6499e12267cc11baa3e88b24b06aae5add667' }, h(HeaderComponent, { key: 'd2e1d462e946d129890187b320db0b8006f505f7', text: this.text, class: this.class })));
     }
 };
 
@@ -94,13 +122,41 @@ const ModularCheckout = class {
         this.submitEvent = createEvent(this, "submit-event");
         this.paymentMethodChangedEvent = createEvent(this, "payment-method-changed");
         this.savePaymentMethod = false;
-    }
-    savePaymentMethodChanged(newValue) {
-        checkoutStore.savePaymentMethod = newValue;
+        this.handleApplePayCompleted = (event) => {
+            const { success, token, error } = event.detail;
+            if (success && token) {
+                this.applePayToken = token;
+                // Complete the checkout with Apple Pay token
+                this.submitCheckoutWithApplePay();
+            }
+            else {
+                console.error('Apple Pay completed but failed:', error);
+                this.errorEvent.emit({
+                    message: (error === null || error === void 0 ? void 0 : error.message) || 'Apple Pay payment failed',
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+            }
+        };
+        this.handleApplePayError = (event) => {
+            const { error } = event.detail;
+            console.error('Apple Pay error:', error);
+            this.errorEvent.emit({
+                message: error || 'Apple Pay error occurred',
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        };
+        this.handleApplePayCancelled = () => {
+            console.log('Apple Pay cancelled by user');
+            // Reset the token if cancelled
+            this.applePayToken = undefined;
+        };
     }
     connectedCallback() {
         this.observer = new MutationObserver(() => {
             this.queryFormRefs();
+            this.setupApplePayListeners(); // set up again listeners when DOM changes
         });
         this.observer.observe(this.hostEl, {
             childList: true,
@@ -130,22 +186,23 @@ const ModularCheckout = class {
         this.analytics = new JustifiAnalytics(this);
         checkPkgVersion();
         checkoutStore.authToken = this.authToken;
-        checkoutStore.savePaymentMethod = this.savePaymentMethod;
         this.fetchCheckout();
-        // Refresh the checkout data when insurance values actually change (not on initial load)
+        // Refresh the checkout data when insurance is added or removed
         insuranceValuesOn('set', (key) => {
             const value = insuranceValues[key];
-            if (value !== undefined && hasInsuranceValueChanged(key, value)) {
+            if (value !== undefined) {
                 this.fetchCheckout();
             }
         });
     }
     componentDidLoad() {
         this.queryFormRefs();
+        this.setupApplePayListeners();
     }
     disconnectedCallback() {
         var _a;
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.removeApplePayListeners();
     }
     fetchCheckout() {
         if (this.getCheckout) {
@@ -198,22 +255,71 @@ const ModularCheckout = class {
         this.billingInformationFormRef = this.hostEl.querySelector('justifi-billing-information-form, justifi-postal-code-form');
         this.insuranceFormRef = this.hostEl.querySelector('justifi-season-interruption-insurance');
         this.sezzlePaymentMethodRef = this.hostEl.querySelector('justifi-sezzle-payment-method');
+        this.applePayRef = this.hostEl.querySelector('justifi-apple-pay');
+    }
+    setupApplePayListeners() {
+        if (this.applePayRef) {
+            this.applePayRef.addEventListener('applePayCompleted', this.handleApplePayCompleted);
+            this.applePayRef.addEventListener('applePayError', this.handleApplePayError);
+            this.applePayRef.addEventListener('applePayCancelled', this.handleApplePayCancelled);
+        }
+    }
+    removeApplePayListeners() {
+        if (this.applePayRef) {
+            this.applePayRef.removeEventListener('applePayCompleted', this.handleApplePayCompleted);
+            this.applePayRef.removeEventListener('applePayError', this.handleApplePayError);
+            this.applePayRef.removeEventListener('applePayCancelled', this.handleApplePayCancelled);
+        }
+    }
+    async submitCheckoutWithApplePay() {
+        if (!this.applePayToken) {
+            this.errorEvent.emit({
+                message: 'No Apple Pay token available',
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        const payment = {
+            payment_mode: 'apple_pay',
+            payment_token: this.applePayToken,
+        };
+        this.completeCheckout({
+            payment,
+            onSuccess: ({ checkout }) => {
+                this.submitEvent.emit({
+                    checkout,
+                    message: 'Apple Pay checkout completed successfully',
+                });
+            },
+            onError: (error) => {
+                this.errorEvent.emit({
+                    message: error.message,
+                    errorCode: ComponentErrorCodes.COMPLETE_CHECKOUT_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+            },
+        });
     }
     async tokenizePaymentMethod(tokenizeArgs) {
-        var _a, _b, _c;
+        var _a, _b;
         const billingInfoValues = (_b = await ((_a = this.billingInformationFormRef) === null || _a === void 0 ? void 0 : _a.getValues())) !== null && _b !== void 0 ? _b : {};
         const combinedBillingInfo = Object.assign(Object.assign({}, tokenizeArgs), billingInfoValues);
         const paymentMethodMetadata = Object.assign({ accountId: checkoutStore.accountId, payment_method_group_id: undefined }, combinedBillingInfo);
-        if (checkoutStore.savePaymentMethod) {
+        if (this.savePaymentMethod) {
             paymentMethodMetadata.payment_method_group_id = checkoutStore.paymentMethodGroupId;
         }
-        return (_c = this.paymentMethodFormRef) === null || _c === void 0 ? void 0 : _c.tokenize({
+        return this.paymentMethodFormRef.tokenize({
             clientId: this.authToken,
             paymentMethodMetadata,
             account: checkoutStore.accountId,
         });
     }
     async getPaymentMethod(submitCheckoutArgs) {
+        // If Apple Pay token is available, return a placeholder since we handle it differently
+        if (this.applePayToken) {
+            return 'apple_pay_token';
+        }
         if (!this.paymentMethodFormRef) {
             return checkoutStore.selectedPaymentMethod;
         }
@@ -230,6 +336,10 @@ const ModularCheckout = class {
     }
     async validate() {
         var _a, _b;
+        // If Apple Pay token is available, validation is already complete
+        if (this.applePayToken) {
+            return true;
+        }
         const promises = [
             (_a = this.paymentMethodFormRef) === null || _a === void 0 ? void 0 : _a.validate(),
             (_b = this.billingInformationFormRef) === null || _b === void 0 ? void 0 : _b.validate()
@@ -242,6 +352,11 @@ const ModularCheckout = class {
     }
     async submitCheckout(submitCheckoutArgs) {
         var _a;
+        // If Apple Pay token is available, use Apple Pay flow
+        if (this.applePayToken) {
+            await this.submitCheckoutWithApplePay();
+            return;
+        }
         const isValid = await this.validate();
         if (!isValid) {
             this.errorEvent.emit({
@@ -306,115 +421,9 @@ const ModularCheckout = class {
         checkoutStore.selectedPaymentMethod = paymentMethodId;
     }
     render() {
-        return (h(Host, { key: '6b18f4f77b736f984ac15f168cc51b74c3927225' }));
+        return (h(Host, { key: '307608e8cd41e1c262dbca6cda7b0bfc8855dedf' }));
     }
     get hostEl() { return getElement(this); }
-    static get watchers() { return {
-        "savePaymentMethod": ["savePaymentMethodChanged"]
-    }; }
-};
-
-const SavedPaymentMethods = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.onPaymentMethodOptionClick = (paymentMethodId) => (e) => {
-            e.preventDefault();
-            checkoutStore.selectedPaymentMethod = paymentMethodId;
-        };
-        this.isAllowedPaymentMethod = (paymentMethod) => {
-            if (paymentMethod.type === 'card' && checkoutStore.disableCreditCard) {
-                return false;
-            }
-            if (paymentMethod.type === 'bank_account' && checkoutStore.disableBankAccount) {
-                return false;
-            }
-            return true;
-        };
-    }
-    componentWillLoad() {
-        if (!checkoutStore.paymentMethods.length) {
-            console.warn('No saved payment methods available.');
-        }
-        if (checkoutStore.disablePaymentMethodGroup) {
-            console.warn('Payment method group is disabled.');
-        }
-    }
-    render() {
-        if (checkoutStore.disablePaymentMethodGroup) {
-            return null;
-        }
-        return (h(StyledHost, null, h("div", { class: "saved-payment-methods" }, checkoutStore.paymentMethods.length ? checkoutStore.paymentMethods
-            .filter(this.isAllowedPaymentMethod)
-            .map((paymentMethod) => (h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) }, h("form-control-radio", { name: "paymentMethodType", value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id, checked: checkoutStore.selectedPaymentMethod === (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id), label: `${CardBrandLabels[paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.brand] || ''} *${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.acct_last_four}` })))) : null)));
-    }
-};
-
-const sezzleLogo = (h("img", { class: "sezzle-smart-button-logo-img", src: "https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg", alt: "Sezzle", style: {
-        display: 'inline',
-        width: '80px',
-        marginLeft: '5px',
-        marginTop: '-5px',
-    } }));
-const SezzlePaymentMethod = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.paymentMethodOptionSelected = createEvent(this, "paymentMethodOptionSelected");
-        this.paymentMethodOptionId = 'sezzle';
-        this.onPaymentMethodOptionClick = (e) => {
-            e.preventDefault();
-            checkoutStore.selectedPaymentMethod = this.paymentMethodOptionId;
-            this.paymentMethodOptionSelected.emit(this.paymentMethodOptionId);
-        };
-        this.initializeSezzleCheckout = () => {
-            let resolveSezzlePromise;
-            this.sezzlePromise = new Promise((resolve) => { resolveSezzlePromise = resolve; });
-            const amount = Number(checkoutStore.paymentAmount);
-            const Checkout = window.Checkout;
-            const checkout = new Checkout({
-                mode: 'popup',
-                publicKey: checkoutStore.bnplProviderClientId,
-                apiMode: checkoutStore.bnplProviderMode,
-                apiVersion: checkoutStore.bnplProviderApiVersion,
-            });
-            checkout.sezzleButtonElement = this.sezzleButtonRef;
-            checkout.init({
-                onClick: function (event) {
-                    event.preventDefault();
-                    checkout.startCheckout({
-                        checkout_url: checkoutStore.bnplProviderCheckoutUrl,
-                    });
-                },
-                onComplete: (event) => resolveSezzlePromise({ bnpl: event.data }),
-                onCancel: (event) => resolveSezzlePromise({ bnpl: event.data }),
-                onFailure: (event) => resolveSezzlePromise({ bnpl: event.data }),
-            });
-            this.sezzleCheckout = checkout;
-            this.installmentPlan = this.sezzleCheckout.getInstallmentPlan(amount);
-        };
-    }
-    componentDidRender() {
-        if (!this.scriptRef)
-            return;
-        this.scriptRef.onload = () => {
-            this.sezzleButtonRef = document.createElement('button');
-            this.initializeSezzleCheckout();
-        };
-    }
-    async resolvePaymentMethod(insuranceValidation) {
-        if (!insuranceValidation.isValid) {
-            return { validationError: true };
-        }
-        this.sezzleButtonRef.click();
-        return this.sezzlePromise;
-    }
-    render() {
-        var _a, _b;
-        if (!checkoutStore.bnplEnabled || checkoutStore.disableBnpl) {
-            console.warn('justifi-sezzle-payment-method: BNPL is not enabled for this account.');
-            return null;
-        }
-        return (h(StyledHost, { class: "payment-method" }, h("script", { src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { name: "paymentMethodType", value: this.paymentMethodOptionId, checked: checkoutStore.selectedPaymentMethod === this.paymentMethodOptionId, label: h("div", null, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_a = this.installmentPlan) === null || _a === void 0 ? void 0 : _a.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments[0].amountInCents))))) }))));
-    }
 };
 
 const PaymentMethodOption = class {
@@ -422,8 +431,8 @@ const PaymentMethodOption = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(StyledHost, { key: '8d4bc7222b08e71511017ef1292360f491de05c0', class: "payment-method" }, h("div", { key: '0c9efd8f33e07dfc7261010ee5d4ad96302ae36b', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: 'c87f7caa8f2770d784d7efc002762f6beb5f1896', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
+        return (h(StyledHost, { key: 'e9069cbe6668585daa972c3d226ef2a901a0b003', class: "payment-method" }, h("div", { key: '9ec14865488d43f8007c481a8ba030b5415abf96', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: '146ee9bc2cfc57192db519643f18ed672ac12e77', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
     }
 };
 
-export { Summary as justifi_checkout_summary, ModularCheckout as justifi_modular_checkout, SavedPaymentMethods as justifi_saved_payment_methods, SezzlePaymentMethod as justifi_sezzle_payment_method, PaymentMethodOption as payment_method_option };
+export { JustifiButton as justifi_button, Summary as justifi_checkout_summary, Header as justifi_header, ModularCheckout as justifi_modular_checkout, PaymentMethodOption as payment_method_option };

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

@@ -1,23 +1,22 @@
-import { r as registerInstance, c as createEvent, h } from './index-N3w5zrz2.js';
-import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-CwPXpnQZ.js';
-import { c as checkoutStore } from './checkout.store-td03RV8y.js';
-import { d as checkoutSummary } from './parts-CKg_luIy.js';
-import { P as PaymentMethodTypes } from './Refund-DBHZkemk.js';
-import { S as StyledHost } from './styled-host-DtvbNFVU.js';
+import { r as registerInstance, c as createEvent, h } from './index-kpoIU4v_.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-B7MJjFP4.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-HlNEzyiZ.js';
-import './Api-BCeKXDaf.js';
-import './config-state-B3mtRA6f.js';
-import './index-BAq5IUBW.js';
-import './utils-Cu5hITuT.js';
-import './dinero-DizZAUMY.js';
-import './_commonjsHelpers-BFTU3MAI.js';
+import './package-BLtzn9pE.js';
+import './Api-DQM93PRm.js';
+import './config-state-BrllxiM0.js';
+import './index-B9me4yN2.js';
+import './utils-B7jE0g5_.js';
 import './ComponentError-Cjcsf8ku.js';
+import './Refund-4B3c-kLz.js';
 import './Pagination-CLHwhyvu.js';
 import './Business-BCoP0TAV.js';
 import './helpers-Mu7LQT-w.js';
 import './state-options-BX8GieXu.js';
-import './Dispute-BH0Xfn-F.js';
+import './Dispute-7MWRbTXI.js';
 
 const PaymentMethodTypeLabels = {
     bankAccount: 'New bank account',
@@ -106,7 +105,7 @@ const Checkout = class {
         return checkoutStore.selectedPaymentMethod === PaymentMethodTypes.card && this.hideCardBillingForm;
     }
     render() {
-        return (h(StyledHost, { key: '66b064eb09a9d14357b5f67ed6cb06a315e28cd3' }, h("justifi-modular-checkout", { key: '0c175af8ee77ba66a6c9e6e338f8e148485e1a44', ref: (el) => (this.modularCheckoutRef = el), authToken: this.authToken, checkoutId: this.checkoutId, savePaymentMethod: this.canSavePaymentMethod && this.savePaymentMethod }, h("div", { key: '27a831604928bae01d8a4f056065cf4bb22ed078', class: "row gy-3 jfi-checkout-core" }, h("div", { key: '42f396148f51c83fcfb6af8385bfeaa0809c80b4', class: "col-12", part: checkoutSummary }, h("justifi-header", { key: '4fdee03c9f6c2d8cb125cf00e7774486f748024b', text: "Summary", level: "h2", class: "fs-5 fw-bold pb-3" }), h("section", { key: '9dd9f8f49c714d915d33f4767196cb31912fe2d4' }, h("justifi-checkout-summary", { key: 'ab3a241477367ace71894a89cdb8df6b02b6a475' }))), h("div", { key: '2fcfa4852da6ab570999e00c900a38ce3f7b22d6', class: "col-12 mt-4" }, h("slot", { key: '0d8990a3c78a59cfad5b31de02d885dd85bdff3b', name: "insurance" })), h("div", { key: '02bcacf6467c99b50b61cd46c4393d2f21ac7f30', class: "col-12 mt-4" }, h("justifi-header", { key: 'f6c88155bcd68d4c76dd1c6d812cb3bf96556454', text: "Payment", level: "h2", class: "fs-5 fw-bold pb-3" }), this.showPaymentTypeHeader && (h("justifi-header", { key: 'dfc55a62398f0baeb3eef4d934644f68cc8483b9', text: "Select payment type", level: "h3", class: "fs-6 fw-bold lh-lg" })), h("div", { key: '3bfdf78062b252b9fc53f63e3248966cd4bd6513', class: "d-flex flex-column" }, h("section", { key: '5f51a590d33ae9074314df4a5808fa4355c3711f' }, h("div", { key: '048568eb658167dcb267a406d11e9672539e5454' }, h("justifi-saved-payment-methods", { key: '150ba48b60bd5818a6fd2004ed1d3b0571050221' }), h("justifi-sezzle-payment-method", { key: 'c959ccbba4683f37706daa889eaa60d0a371d682' }), !this.disableCreditCard && (h("div", { key: '412255d8cf36a0e3669680e09ca77d5efedf7969' }, h("payment-method-option", { key: '9aaaecfd5880a7de93e6f3c986e12f2e63407674', 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: '4fefd1eb74d9c6ba17a1d01fe59ab3334bf8bdac', class: "mt-4 mb-4" }, h("justifi-card-form", { key: '6c78f67bce200b47201220a528fb289861761727' }))))), !this.disableBankAccount && (h("div", { key: 'c5b97b68abaf8fa754b9f12e08a1b68c85b4c852' }, h("payment-method-option", { key: '24c013b3e317d26c9c7b961c0b0a87f2f94949f2', 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: 'b61b75f7e449b1217357bdaddfbfcf37d863612f', class: "mt-4 mb-4" }, h("justifi-bank-account-form", { key: 'e6d182d60e1b308f76b4364c9a757c7ca59debf2' }))))))))), this.showBillingFormSection && (h("div", { key: '71ea650fdb37ff7227b4f8027a54f74c8bf8a575', class: "col-12 mt-4" }, this.showBillingForm && (h("justifi-header", { key: 'f36db4e0d6d008d924ada83a83899377e46ece90', text: "Billing Address", level: "h2", class: "fs-5 fw-bold pb-3" })), this.showPostalCodeForm && (h("justifi-postal-code-form", { key: '19005f53df4bd597ccf6484d662d7d230a8a7b83' })), this.showBillingForm && (h("justifi-billing-information-form", { key: 'e5f501833f7aef3c603d18b29b21c39f990e8ef1' })))), h("div", { key: '828ba958634f58c641a5f6e3a848993d03e4aba0', class: "col-12" }, this.canSavePaymentMethod && (h("justifi-save-new-payment-method", { key: 'e94caf3d77e0299008e6a0bbf6852347eaa02ebf' }))), h("div", { key: '8436468192642a3f20f82b390e5ec53c4dc951bf', class: "mt-4" }, h("justifi-button", { key: '981448c550a72eb1aa936d785912729a1d788cac', 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: '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" } }))))));
     }
     static get watchers() { return {
         "authToken": ["propChanged"],

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

@@ -1,18 +1,17 @@
-import { r as registerInstance, h } from './index-N3w5zrz2.js';
-import './config-state-B3mtRA6f.js';
-import './dinero-DizZAUMY.js';
+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-DBHZkemk.js';
+import { I as ICheckoutStatus, a as ICheckoutPaymentModeParam } from './Refund-4B3c-kLz.js';
 import './Pagination-CLHwhyvu.js';
+import './Payment-Bs0-9Lnt.js';
 import './Business-BCoP0TAV.js';
-import './Dispute-BH0Xfn-F.js';
-import { f as filterParams, p as propsParams, c as clearParams } from './checkouts-list-params-state-DFWVMJRJ.js';
-import { e as checkoutsListFilterMenu, s as statusCheckoutsListFilterParam, p as paymentModeCheckoutsListFilterParam } from './parts-CKg_luIy.js';
-import { S as StyledHost } from './styled-host-DtvbNFVU.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 { S as StyledHost } from './styled-host-B_XBaM7z.js';
 import './event-types-CZfYo5-1.js';
-import './index-BAq5IUBW.js';
-import './_commonjsHelpers-BFTU3MAI.js';
-import './utils-Cu5hITuT.js';
+import './index-B9me4yN2.js';
 import './helpers-Mu7LQT-w.js';
 import './state-options-BX8GieXu.js';
 
@@ -52,7 +51,7 @@ const CheckoutsListFilters = class {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: 'd025c4862f0245938f09ea574379b262252a4e7e' }, h("table-filters-menu", { key: 'acd9800c723d7e956ee237e1d7944e58d5c4f332', params: filterMenuParams, clearParams: clearParams, part: checkoutsListFilterMenu }, h("div", { key: '453749cdaa376a051dbf1acdbedfa625a0c77c5c', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '8b83f81027c68ef9b47623ea66dc471aecf28ac4', class: "p-2" }, h("form-control-select", { key: '74e2548e0f96d63978e6fffe58ae1ca32b5fd4ee', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status, disabled: !!this.checkoutStatus, part: statusCheckoutsListFilterParam })), h("div", { key: 'ea1fe571e4cc2ae9e2d2a62d7205e27fa1c7dc3f', class: "p-2" }, h("form-control-select", { key: 'e948b0e57ab03d31c32a036c24f1a29a45b5a90c', 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: '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 }))))));
     }
 };
 

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

@@ -1,27 +1,26 @@
-import { r as registerInstance, c as createEvent, h } from './index-N3w5zrz2.js';
-import './config-state-B3mtRA6f.js';
-import './dinero-DizZAUMY.js';
+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-DBHZkemk.js';
+import { C as Checkout } from './Refund-4B3c-kLz.js';
 import './Pagination-CLHwhyvu.js';
+import './Payment-Bs0-9Lnt.js';
 import './Business-BCoP0TAV.js';
-import './Dispute-BH0Xfn-F.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-CwPXpnQZ.js';
-import { C as CheckoutService } from './checkout.service-BgDCPjQU.js';
-import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccounts-DrFpGKDV.js';
-import { S as StyledHost } from './styled-host-DtvbNFVU.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-B7MJjFP4.js';
+import { C as CheckoutService } from './checkout.service-CXeKDZTF.js';
+import { m as makeGetSubAccounts, S as SubAccountService } from './get-subaccounts-C62B2OC_.js';
+import { S as StyledHost } from './styled-host-B_XBaM7z.js';
 import './event-types-CZfYo5-1.js';
-import { d as defaultColumnsKeys } from './checkouts-table-COpCngi0.js';
-import './index-BAq5IUBW.js';
-import './_commonjsHelpers-BFTU3MAI.js';
-import './utils-Cu5hITuT.js';
+import { d as defaultColumnsKeys } from './checkouts-table-Djb7Yj6O.js';
+import './index-B9me4yN2.js';
 import './helpers-Mu7LQT-w.js';
 import './state-options-BX8GieXu.js';
-import './package-HlNEzyiZ.js';
-import './Api-BCeKXDaf.js';
-import './badge-BrapPg3R.js';
-import './parts-CKg_luIy.js';
+import './package-BLtzn9pE.js';
+import './Api-DQM93PRm.js';
+import './badge-D-vrtiQR.js';
+import './parts-D3G5aVLy.js';
 
 const makeGetCheckouts = ({ accountId, authToken, service }) => async ({ params, onSuccess, onError }) => {
     var _a, _b;
@@ -107,7 +106,7 @@ const CheckoutsList = class {
         }
     }
     render() {
-        return (h(StyledHost, { key: '073b7fb919a3f4d008a81cc7e13fb8ad72fed26c' }, h("checkouts-list-core", { key: '232229d4af023570ac261fda6df120a9451304cf', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '41bf633467138b6af13b1c02ccf1e1016ec54bfe' }, h("checkouts-list-core", { key: 'cd3ca431258ad73e701fe74612ecdf2c0f2a1bda', getCheckouts: this.getCheckouts, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

package/dist/esm/justifi-config-provider.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance } from './index-N3w5zrz2.js';
-import { s as setConfigState } from './config-state-B3mtRA6f.js';
-import './index-BAq5IUBW.js';
+import { r as registerInstance } from './index-kpoIU4v_.js';
+import { s as setConfigState } from './config-state-BrllxiM0.js';
+import './index-B9me4yN2.js';
 
 const ConfigProvider = class {
     constructor(hostRef) {

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

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

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-N3w5zrz2.js';
+import { r as registerInstance, c as createEvent, h } from './index-kpoIU4v_.js';
 import { D as DisputeManagementClickActions } from './event-types-Bg2SZArf.js';
-import { D as Dispute, a as DisputeStatus } from './Dispute-BH0Xfn-F.js';
+import { a as Dispute, D as DisputeStatus } from './Dispute-7MWRbTXI.js';
 
 const DisputeManagementCore = class {
     constructor(hostRef) {
@@ -49,7 +49,7 @@ const DisputeManagementCore = class {
         });
     }
     render() {
-        return (h("div", { key: 'bb50db485b666c8a69826d3ccdccb19e1defff7f' }, 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: '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 }))));
     }
     static get watchers() { return {
         "getDispute": ["updateOnPropChange"]

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

@@ -1,18 +1,17 @@
-import { r as registerInstance, c as createEvent, h } from './index-N3w5zrz2.js';
+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-CwPXpnQZ.js';
-import { D as Dispute } from './Dispute-BH0Xfn-F.js';
+import { c as checkPkgVersion, J as JustifiAnalytics } from './check-pkg-version-B7MJjFP4.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-C2dMLW9w.js';
-import './package-HlNEzyiZ.js';
-import './Api-BCeKXDaf.js';
-import './config-state-B3mtRA6f.js';
-import './index-BAq5IUBW.js';
-import './utils-Cu5hITuT.js';
-import './dinero-DizZAUMY.js';
-import './_commonjsHelpers-BFTU3MAI.js';
-import './Refund-DBHZkemk.js';
+import { D as DisputeService } from './dispute.service-DWs_TX-m.js';
+import './package-BLtzn9pE.js';
+import './Api-DQM93PRm.js';
+import './config-state-BrllxiM0.js';
+import './index-B9me4yN2.js';
+import './utils-B7jE0g5_.js';
+import './Refund-4B3c-kLz.js';
 import './Pagination-CLHwhyvu.js';
+import './Payment-Bs0-9Lnt.js';
 import './Business-BCoP0TAV.js';
 import './helpers-Mu7LQT-w.js';
 import './state-options-BX8GieXu.js';
@@ -87,7 +86,7 @@ const DisputeManagement = class {
         }
     }
     render() {
-        return (h("justifi-dispute-management-core", { key: 'b1139bacd020b346ffe8953489c972ae7bf35076', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
+        return (h("justifi-dispute-management-core", { key: '4087eb105a046a3cc194d9f25c80fa11298fa0a2', getDispute: this.getDispute, disputeId: this.disputeId, authToken: this.authToken, "onError-event": this.handleErrorEvent }));
     }
     static get watchers() { return {
         "disputeId": ["propChanged"],