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

package/dist/module/justifi-terminal-orders-list.js

@@ -7,7 +7,7 @@ import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
 import { d as defineCustomElement$2, a as defaultColumnsKeys } from './terminal-orders-list-core2.js';
 import './config-state.js';
 import './dinero.js';
-import { o as TerminalOrder, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import { n as TerminalOrder, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import './Pagination.js';
 import './Business.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
@@ -96,7 +96,7 @@ const TerminalOrdersList = /*@__PURE__*/ proxyCustomElement(class TerminalOrders
         }
     }
     render() {
-        return (h(StyledHost, { key: '28394e2db12721ad0f64ada71dc3a7cdba5fc7bd' }, h("terminal-orders-list-core", { key: '355e5c1de7a3bfd1afc4ddb64be8aa9b860cceb5', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: 'e5e49813521cab770fd45d4cf16fdb347ca5f1a8' }, h("terminal-orders-list-core", { key: '162c8dee504228025cefec946124becea3522af3', getTerminalOrders: this.getTerminalOrders, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
 }, [257, "justifi-terminal-orders-list", {
         "accountId": [1, "account-id"],

package/dist/module/justifi-terminals-list-filters.js

@@ -8,7 +8,7 @@ import './event-types.js';
 import './justifi-radio-list-item2.js';
 import './config-state.js';
 import './dinero.js';
-import { g as ITerminalStatus } from './Refund.js';
+import { f as ITerminalStatus } from './Refund.js';
 import './Pagination.js';
 import './Business.js';
 import { d as defineCustomElement$6 } from './custom-popper2.js';
@@ -51,7 +51,7 @@ const TerminalsListFilters = /*@__PURE__*/ proxyCustomElement(class TerminalsLis
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '61740c6ddc8d9ae3f59748c49bdf5cd1a805c967' }, h("table-filters-menu", { key: 'a1fff9dec129e6f1457d7fc87a15758a6c4583dd', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: 'a14b25c631435c48602953d1a4a240b46ccafc09', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: 'bba2a423f61e4c099d67f1ab02b96e15c462d825', class: "p-2" }, h("form-control-text", { key: '5853b337812ae1915ea5f0fbb6a7458b9767a7ce', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: '2067dfd98dc4eeaf6f7312a29cb7dbebaf027110', class: "p-2" }, h("form-control-text", { key: '5e39773e75d8ebf1d2e089d26afdbe1c4bb7a2c7', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: terminalOrderIdTerminalsListFilterParam })), h("div", { key: 'a3bbd3db48174df02bf7bf3f68bd80e2a33ed3ae', class: "p-2" }, h("form-control-select", { key: 'cd591dfc5ceabe5631983139f04435e5f46cb47e', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
+        return (h(StyledHost, { key: '653849e5d1094dff32f986a5710bf4fb8fa792ef' }, h("table-filters-menu", { key: '129ea81e6071f719f5f54613462ea2bf33d860a0', params: filterMenuParams, clearParams: clearParams, part: terminalsListFilterMenu }, h("div", { key: '01c23c89129c746e5477fe910eff85a1484c05f2', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '8b31ce4b3d80a42e865d38c798afdf2a0ca6fead', class: "p-2" }, h("form-control-text", { key: '5cbe8bd912a342f4e5b70a7e5f95b8663e713a49', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdTerminalsListFilterParam })), h("div", { key: 'fe17b736b67c74474b89b535075863bd98aa27b8', class: "p-2" }, h("form-control-text", { key: '49bae44c482770545185013c2d82a7a3f636ecf4', name: "terminal_order_id", label: "Terminal Order ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalOrderId || filterParams.terminal_order_id, disabled: !!this.terminalOrderId, part: terminalOrderIdTerminalsListFilterParam })), h("div", { key: '0c30aa7e5a6e204ba7425196eaaeddb0334a4563', class: "p-2" }, h("form-control-select", { key: '0db45f763aea2fb35cb6e961bd696f7bdf507471', name: "status", label: "Status", options: this.terminalStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.terminalStatus || filterParams.status, disabled: !!this.terminalStatus, part: terminalStatusTerminalsListFilterParam }))))));
     }
 }, [257, "justifi-terminals-list-filters", {
         "terminalId": [1, "terminal-id"],

package/dist/module/justifi-terminals-list.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as Terminal, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
+import { k as Terminal, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Refund.js';
 import { c as checkPkgVersion, J as JustifiAnalytics } from './Analytics.js';
 import { T as TerminalService } from './terminal.service.js';
 import './config-state.js';
@@ -101,7 +101,7 @@ const TerminalsList = /*@__PURE__*/ proxyCustomElement(class TerminalsList exten
         }
     }
     render() {
-        return (h(StyledHost, { key: '0a3db94e812f99055939476c8e0e2f38828fbe5d' }, h("terminals-list-core", { key: 'c0795b3f95342ebf26d9e8e97446b4c8f79fb545', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '6034706e77de0a703455368eaab0ef0cbbfb5765' }, h("terminals-list-core", { key: 'b9e3292829be1b48b6f6146b9a97f9060b1540c1', getTerminals: this.getTerminals, getSubAccounts: this.getSubAccounts, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get watchers() { return {
         "accountId": ["propChanged"],

package/dist/module/modular-checkout.js

@@ -3,12 +3,13 @@ import { c as checkoutStore, o as onChange } from './checkout.store.js';
 import { J as JustifiAnalytics, c as checkPkgVersion } from './Analytics.js';
 import './config-state.js';
 import './dinero.js';
-import { C as ComponentErrorSeverity, a as ComponentErrorCodes, d as ComponentErrorMessages, I as ICheckoutStatus } from './Refund.js';
+import { C as ComponentErrorSeverity, a as ComponentErrorCodes, c as ComponentErrorMessages, I as ICheckoutStatus } from './Refund.js';
 import './Pagination.js';
 import './Business.js';
 import { g as getErrorCode, a as getErrorMessage } from './utils4.js';
 import { C as CheckoutService } from './checkout.service.js';
 import { i as insuranceValuesOn, h as hasInsuranceValueChanged, a as insuranceValues } from './insurance-state.js';
+import { P as PAYMENT_METHODS, b as PAYMENT_MODE, a as PAYMENT_METHOD_TYPES } from './ModularCheckout.js';
 
 const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({ onSuccess, onError }) => {
     var _a;
@@ -73,6 +74,35 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
         this.submitEvent = createEvent(this, "submit-event", 7);
         this.paymentMethodChangedEvent = createEvent(this, "payment-method-changed", 7);
         this.savePaymentMethod = false;
+        this.handleApplePayCompleted = (event) => {
+            const { success, token, error } = event.detail;
+            if (success && token) {
+                checkoutStore.paymentToken = token;
+                checkoutStore.selectedPaymentMethod = PAYMENT_METHODS.APPLE_PAY;
+                this.submitCheckout();
+            }
+            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 = () => {
+            checkoutStore.paymentToken = undefined;
+            checkoutStore.selectedPaymentMethod = undefined;
+        };
     }
     savePaymentMethodChanged(newValue) {
         checkoutStore.savePaymentMethod = newValue;
@@ -80,39 +110,32 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
     connectedCallback() {
         this.observer = new MutationObserver(() => {
             this.queryFormRefs();
+            this.setupApplePayListeners(); // set up again listeners when DOM changes
         });
         this.observer.observe(this.hostEl, {
             childList: true,
-            subtree: true
+            subtree: true,
         });
         checkoutStore.checkoutId = this.checkoutId;
         const config = {
             authToken: this.authToken,
             checkoutId: this.checkoutId,
-            service: new CheckoutService()
+            service: new CheckoutService(),
         };
         this.getCheckout = makeGetCheckout(config);
         this.completeCheckout = makeCheckoutComplete(config);
-        onChange('selectedPaymentMethod', (newValue) => {
+        onChange("selectedPaymentMethod", (newValue) => {
             this.paymentMethodChangedEvent.emit(newValue);
         });
     }
     componentWillLoad() {
-        if (!this.authToken || !this.checkoutId) {
-            this.errorEvent.emit({
-                message: ComponentErrorMessages.NOT_AUTHENTICATED,
-                errorCode: ComponentErrorCodes.NOT_AUTHENTICATED,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-            return;
-        }
         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)
-        insuranceValuesOn('set', (key) => {
+        insuranceValuesOn("set", (key) => {
             const value = insuranceValues[key];
             if (value !== undefined && hasInsuranceValueChanged(key, value)) {
                 this.fetchCheckout();
@@ -121,12 +144,22 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
     }
     componentDidLoad() {
         this.queryFormRefs();
+        this.setupApplePayListeners();
     }
     disconnectedCallback() {
         var _a;
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.removeApplePayListeners();
     }
     fetchCheckout() {
+        if (!this.authToken || !this.checkoutId) {
+            this.errorEvent.emit({
+                message: ComponentErrorMessages.NOT_AUTHENTICATED,
+                errorCode: ComponentErrorCodes.NOT_AUTHENTICATED,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
         if (this.getCheckout) {
             this.getCheckout({
                 onSuccess: ({ checkout }) => {
@@ -154,12 +187,12 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
                         errorCode: ComponentErrorCodes.FETCH_ERROR,
                         severity: ComponentErrorSeverity.ERROR,
                     });
-                }
+                },
             });
         }
     }
     updateStore(checkout) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         checkoutStore.accountId = checkout.account_id;
         checkoutStore.paymentMethods = checkout.payment_methods;
         checkoutStore.paymentMethodGroupId = checkout.payment_method_group_id;
@@ -167,118 +200,141 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
         checkoutStore.totalAmount = checkout.total_amount;
         checkoutStore.paymentAmount = checkout.payment_amount;
         checkoutStore.bnplEnabled = checkout.payment_settings.bnpl_payments;
-        checkoutStore.bnplProviderClientId = (_a = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _a === void 0 ? void 0 : _a.provider_client_id;
-        checkoutStore.bnplProviderMode = (_b = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _b === void 0 ? void 0 : _b.provider_mode;
-        checkoutStore.bnplProviderApiVersion = (_c = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _c === void 0 ? void 0 : _c.provider_api_version;
-        checkoutStore.bnplProviderCheckoutUrl = (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_checkout_url;
+        checkoutStore.insuranceEnabled = checkout.payment_settings.insurance_payments;
+        checkoutStore.bankAccountVerification = (_a = checkout.payment_settings) === null || _a === void 0 ? void 0 : _a.bank_account_verification;
+        checkoutStore.bnplProviderClientId = (_b = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _b === void 0 ? void 0 : _b.provider_client_id;
+        checkoutStore.bnplProviderMode = (_c = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _c === void 0 ? void 0 : _c.provider_mode;
+        checkoutStore.bnplProviderApiVersion = (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_api_version;
+        checkoutStore.bnplProviderCheckoutUrl =
+            (_e = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _e === void 0 ? void 0 : _e.provider_checkout_url;
     }
     queryFormRefs() {
-        this.paymentMethodFormRef = this.hostEl.querySelector('justifi-card-form, justifi-bank-account-form');
-        this.billingFormRef = this.hostEl.querySelector('justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full');
+        this.billingFormRef = this.hostEl.querySelector("justifi-billing-form, justifi-bank-account-billing-form-simple, justifi-card-billing-form-simple, justifi-billing-form-full");
+        this.applePayRef = this.hostEl.querySelector("justifi-apple-pay");
+        this.paymentMethodFormRef =
+            this.hostEl.querySelector('justifi-card-form, justifi-bank-account-form, justifi-tokenize-payment-method');
         this.insuranceFormRef = this.hostEl.querySelector('justifi-season-interruption-insurance');
-        this.sezzlePaymentMethodRef = this.hostEl.querySelector('justifi-sezzle-payment-method');
+    }
+    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 tokenizePaymentMethod(tokenizeArgs) {
         var _a, _b, _c;
-        const billingInfoValues = (_b = await ((_a = this.billingFormRef) === null || _a === void 0 ? void 0 : _a.getValues())) !== null && _b !== void 0 ? _b : {};
+        const billingInfoValues = (_b = (await ((_a = this.billingFormRef) === 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) {
-            paymentMethodMetadata.payment_method_group_id = checkoutStore.paymentMethodGroupId;
+            paymentMethodMetadata.payment_method_group_id =
+                checkoutStore.paymentMethodGroupId;
         }
-        return (_c = this.paymentMethodFormRef) === null || _c === void 0 ? void 0 : _c.tokenize({
+        const tokenizeResult = await ((_c = this.paymentMethodFormRef) === null || _c === void 0 ? void 0 : _c.tokenize({
             clientId: this.authToken,
             paymentMethodMetadata,
             account: checkoutStore.accountId,
-        });
-    }
-    async getPaymentMethod(submitCheckoutArgs) {
-        // If we have a payment token from the store (set by tokenize-payment-method), use it
-        if (checkoutStore.paymentToken) {
-            return checkoutStore.paymentToken;
-        }
-        // Fallback to the original tokenization logic for backward compatibility
-        if (!this.paymentMethodFormRef) {
-            return checkoutStore.selectedPaymentMethod;
-        }
-        const { error, id: token } = await this.tokenizePaymentMethod(submitCheckoutArgs);
-        if (error) {
-            this.errorEvent.emit({
-                errorCode: error.code,
-                message: error.message,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-            return undefined;
+        }));
+        if (tokenizeResult.error) {
+            return tokenizeResult;
         }
-        return token;
+        checkoutStore.paymentToken = tokenizeResult.id;
+        return tokenizeResult.id;
     }
+    // if validation fails, the error will be emitted by the component
     async validate() {
-        var _a, _b;
-        console.log('billing information form', this.billingFormRef);
-        console.log('payment method form', this.paymentMethodFormRef);
-        console.log('insurance form', this.insuranceFormRef);
-        console.log('sezzle payment method', this.sezzlePaymentMethodRef);
-        const promises = [
-            (_a = this.paymentMethodFormRef) === null || _a === void 0 ? void 0 : _a.validate(),
-            (_b = this.billingFormRef) === null || _b === void 0 ? void 0 : _b.validate()
-        ];
-        if (this.insuranceFormRef) {
+        const promises = [];
+        if (checkoutStore.insuranceEnabled && this.insuranceFormRef) {
             promises.push(this.insuranceFormRef.validate());
         }
-        const validationResults = await Promise.all(promises);
-        return validationResults.every(result => (result === null || result === void 0 ? void 0 : result.isValid) !== false);
-    }
-    async submitCheckout(submitCheckoutArgs) {
-        var _a;
-        const isValid = await this.validate();
-        if (!isValid) {
-            this.errorEvent.emit({
-                message: 'Please fill in all required fields.',
-                errorCode: ComponentErrorCodes.VALIDATION_ERROR,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-            return;
+        // For new card/bank account, validate payment method + billing.
+        if (checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.NEW_CARD ||
+            checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.NEW_BANK_ACCOUNT) {
+            if (this.paymentMethodFormRef)
+                promises.push(this.paymentMethodFormRef.validate());
+            if (this.billingFormRef)
+                promises.push(this.billingFormRef.validate());
         }
-        let payment;
-        if (checkoutStore.selectedPaymentMethod === 'sezzle') {
-            const insuranceValidation = this.insuranceFormRef ? await this.insuranceFormRef.validate() : { isValid: true };
-            const sezzleResult = await this.sezzlePaymentMethodRef.resolvePaymentMethod(insuranceValidation);
-            if (sezzleResult.error) {
+        if (promises.length === 0)
+            return true;
+        try {
+            const results = await Promise.all(promises);
+            // Normalize different validator return shapes:
+            // - boolean -> use it directly
+            // - object  -> look for isValid; treat missing isValid as falsey only if explicitly false
+            const resultsAreValid = results.every(r => typeof r === 'boolean' ? r : (r === null || r === void 0 ? void 0 : r.isValid) !== false);
+            if (!resultsAreValid) {
                 this.errorEvent.emit({
-                    message: sezzleResult.error.message,
-                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    message: 'Validation error',
+                    errorCode: ComponentErrorCodes.VALIDATION_ERROR,
                     severity: ComponentErrorSeverity.ERROR,
                 });
-                return;
-            }
-            else if (((_a = sezzleResult.bnpl) === null || _a === void 0 ? void 0 : _a.status) === 'success') {
-                payment = {
-                    payment_mode: 'bnpl',
-                    payment_token: undefined,
-                };
+                return false;
             }
+            return true;
         }
-        else {
-            const paymentMethod = await this.getPaymentMethod(submitCheckoutArgs);
-            if (!paymentMethod) {
+        catch (_a) {
+            // If any validator throws/rejects, consider the whole validation failed.
+            return false;
+        }
+    }
+    async submitCheckout(submitCheckoutArgs) {
+        const isValid = await this.validate();
+        const shouldTokenize = checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.NEW_CARD || checkoutStore.selectedPaymentMethod === PAYMENT_METHODS.NEW_BANK_ACCOUNT;
+        if (shouldTokenize) {
+            const tokenizeResult = await this.tokenizePaymentMethod(submitCheckoutArgs);
+            if (tokenizeResult.error) {
                 this.errorEvent.emit({
-                    message: 'Payment method tokenization failed.',
+                    message: tokenizeResult.error.message,
                     errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                     severity: ComponentErrorSeverity.ERROR,
                 });
                 return;
             }
-            payment = {
-                payment_mode: 'ecom',
-                payment_token: paymentMethod,
-            };
         }
+        if (!isValid) {
+            this.errorEvent.emit({
+                message: "Please fill in all required fields.",
+                errorCode: ComponentErrorCodes.VALIDATION_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        if (!checkoutStore.paymentToken) {
+            this.errorEvent.emit({
+                message: 'Payment token not found.',
+                errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+        let payment;
+        const MAP_PAYMENT_METHOD_TO_PAYMENT_MODE = {
+            [PAYMENT_METHODS.NEW_CARD]: PAYMENT_MODE.ECOM,
+            [PAYMENT_METHODS.NEW_BANK_ACCOUNT]: PAYMENT_MODE.ECOM,
+            [PAYMENT_METHODS.SAVED_BANK_ACCOUNT]: PAYMENT_MODE.ECOM,
+            [PAYMENT_METHODS.SAVED_CARD]: PAYMENT_MODE.ECOM,
+            [PAYMENT_METHOD_TYPES.SEZZLE]: PAYMENT_MODE.BNPL,
+            [PAYMENT_METHOD_TYPES.PLAID]: PAYMENT_MODE.ECOM,
+            [PAYMENT_METHOD_TYPES.APPLE_PAY]: PAYMENT_MODE.APPLE_PAY,
+        };
+        payment = {
+            payment_mode: MAP_PAYMENT_METHOD_TO_PAYMENT_MODE[checkoutStore.selectedPaymentMethod],
+            payment_token: checkoutStore.paymentToken,
+        };
         this.completeCheckout({
             payment,
             onSuccess: ({ checkout }) => {
                 this.submitEvent.emit({
                     checkout,
-                    message: 'Checkout completed successfully',
+                    message: "Checkout completed successfully",
                 });
             },
             onError: (error) => {
@@ -290,11 +346,8 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
             },
         });
     }
-    async setSelectedPaymentMethod(paymentMethodId) {
-        checkoutStore.selectedPaymentMethod = paymentMethodId;
-    }
     render() {
-        return (h(Host, { key: '240891d53dfb817bb39cbeb1e9a96ab885933a47' }));
+        return h(Host, { key: 'f836e0a75481e672f41c3cc63e94e0d24387a53c' });
     }
     get hostEl() { return this; }
     static get watchers() { return {
@@ -305,8 +358,7 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
         "checkoutId": [1, "checkout-id"],
         "savePaymentMethod": [4, "save-payment-method"],
         "validate": [64],
-        "submitCheckout": [64],
-        "setSelectedPaymentMethod": [64]
+        "submitCheckout": [64]
     }, undefined, {
         "savePaymentMethod": ["savePaymentMethodChanged"]
     }]);

package/dist/module/package.js

@@ -1,5 +1,5 @@
 const name = "@justifi/webcomponents";
-const version = "6.0.0-rc.4";
+const version = "6.0.0-rc.6";
 var webcomponentsPackageJson = {
 	name: name,
 	version: version};

package/dist/module/payment-details-core2.js

@@ -59,16 +59,16 @@ const PaymentDetailsCore = /*@__PURE__*/ proxyCustomElement(class PaymentDetails
         });
     }
     render() {
-        return (h(StyledHost, { key: '9dbe79ee5e8311fd5aa7aad9e9a6301106aec61f' }, this.loading && h(PaymentDetailsLoading, { key: '3a7f568787c10143772c32d9dc4db523244b5f62' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: 'bfdf7c5345f7a32c86e4259db76764f7a00a20d8', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '2048b114978df6809242443777ab8235b7feb830', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPaymentStatusToBadge(this.payment.status), this.payment.expedited ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : null)), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '99d50622d37401cdd9ea1bd1176bf4dd340ef5f2', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'cb4a551f76d9fa28ef101aa3804942ae5ba83617', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'b540de24dc63bb96e5e2220888de37ead33cefc9', title: "ID", value: this.payment.id })), h("div", { key: 'b865e3dbff94e8827ee1ed60dcec1c161cb60e44', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'e778e714c6324d876f3af9fe2f79bbdb45e84865', sectionTitle: "Details" }), h("div", { key: 'dff5e71357913940aa80d8019620959ad80758b5', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'abf3993aed218517de68e0617ea5d9e9d569c689', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '6713575415bf8d9a4ff0e4c7697799be4e4f188b', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '4e40a4aaee847b0c25c25fedc9c26b95e73fdb46', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: 'c40dce673a661011c72ae05812c4a14d5702621d', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '4e44f803a411a529daae43ce8ae5073e39ae4c38', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '81dc148a871094e5fafeaf5ba204c12550542511', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: 'be76b2123eaa58eda0d4b69013207501b7a26e8a', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '800b2f8d03684eb3b989d534c0896016e0647991', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '0934d177e63f90b8a36e9bbc4fa8d6f07e3b11af', title: "Description", value: this.payment.description }), h(DetailItem, { key: '281cbfd52c7833674ff818ad904abe07e8f8a538', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: 'a5ba0c704c0823d715ceafd08dc7159273feaf72', sectionTitle: "Payment Method" }),
-            h("div", { key: 'f54a43598fc6230eae222a50964757052fa1747a', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '6edd355e37bf732fa9b8e6790c4a0333063604f0', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '4d16f3e86070c2fea548bf964bca4c09d112c045', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '0d6a7a66fff4c6e600d8ceda49283baf5f482bf6', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '1ec87d02c11900c8ad43e054e816663bde45da8a', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '74450dde3eca4648ebd39be643ae98f3f6d75110', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: '179fd1067e83c53a1d8fec1f44a5130aa2da38b8' }, this.loading && h(PaymentDetailsLoading, { key: 'fae995a103762304141f5d64309c43706f159981' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: '460fd7199e7fd55594a032268112276fd318f8af', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'bab7c0ec6254e8e1aabaa7b09ead4a123bec712c', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPaymentStatusToBadge(this.payment.status), this.payment.expedited ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : null)), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '99f5be6e04b83a6cd308f8dfd853ef93a27b1ac0', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '4aa2bf20c48a9b3fc211f8cedf938dbdf55720b6', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'c61b0d9bc351221b7325fcea678cfadd53c15d75', title: "ID", value: this.payment.id })), h("div", { key: 'd2c43947987a94b999fe8d0e6b9472096e0c4abe', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'e0a24a94fdc99835612b60a4fb181188d201cef4', sectionTitle: "Details" }), h("div", { key: '8fd1ad4e60434ada9293e0cfbd9c10165188c7d0', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '26a63b1a462843e40da95ae017ab2f10f6f91c5d', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '2be889b743ddd4d03a0d202fddfa05bf13c962bf', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '461ef049a69bea873ca4b847b477c29f154c54c6', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: 'ac88dfcf774f3b7615c23c5fc6645de580729834', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '4132a16cf6c72cb8af266d26e96e816733866069', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '5e01c6646a49d7039fbe1698e6674dbf095bf30f', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: 'f71933ebe9713373c70e0d82536e9650cd3dec57', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'cbf4793ae80ad173896e12d8c07b11a0c045a543', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '415f63d93bcb99ee30aa3998a03f09c9168ccc13', title: "Description", value: this.payment.description }), h(DetailItem, { key: 'b639c7ab661a4213e1eed62ad7cac3ec6fc92fa0', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: 'fb0073679f6af3acd74d55f297f1762ff1fbd248', sectionTitle: "Payment Method" }),
+            h("div", { key: '14d2e149d9138004dddfa21a87f4028ffd955fce', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'bcece9db3e45210fc8235bf26366fc47860404f3', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '16d50e65ded00842d3ed2b30f807b725c4678f61', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '4851f286d529f011cff98cd4c8e5bc4842adb49c', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '6dfd0d0876d44fd116d05a59b272fe25ecf72799', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '3ea4bc645d49ec0c8a4ff224dcdb0673d24f6f7c', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: 'ba48cf4acb779e1ba3f6cd84a77f91e85c9e21d4', sectionTitle: "Payment Method" }),
-            h("div", { key: '6b48866ab4926cd8e223a283ad61adc027e962ce', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '81f448493fa8f77ab3f2105e0982ba2d9ec11ed5', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'c7281ecb2655c6ae8ffc1d3579dc334c2e706071', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '80bf9485a7d00f64f5c2c9f3e8bf9a30c80f3e63', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '70e74a7a22418526db003d401bdabbdccd1d351b', title: "Account Owner", value: this.payment.payment_method.payersName }))
+            h(DetailSectionTitle, { key: 'ee8d44c8b3d28c4990401ba8d0f241bef2e9680d', sectionTitle: "Payment Method" }),
+            h("div", { key: '12fd0d00d5cdfd16d409b2ce3038a5e448d9c811', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '993a71c7a16ca5c739480ec5fd28f3db43204275', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'f9d9358986eb850422a44f6e133c536bd26ff36f', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: 'eea1acc64ec88327c946cafb7d4fe17a52ec7c9b', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '16863e45e29108df1292075aba051add12a396bc', title: "Account Owner", value: this.payment.payment_method.payersName }))
         ], this.payment.metadata && [
-            h(DetailSectionTitle, { key: '57aa7c929bf0823cd3cd5030f1853a7522cc6ec6', sectionTitle: 'Metadata' }),
-            h("div", { key: '26e14400b0eeb8e161ce22b769c8396814b7c73b', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '9446825737907a364594f6c75621ed72cf8ea389', metadata: this.payment.metadata }))
+            h(DetailSectionTitle, { key: 'fc4e5a842adb3d340d4ba42bba729ee0222e11b5', sectionTitle: 'Metadata' }),
+            h("div", { key: '62a0861b552552b9ee70253e1fb4b94e6930d684', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'd8254200469dfd44f48000d2a131f2426e571183', metadata: this.payment.metadata }))
         ])))));
     }
     static get watchers() { return {

package/dist/module/payment-method-option.js

@@ -14,7 +14,7 @@ const PaymentMethodOption$1 = /*@__PURE__*/ proxyCustomElement(class PaymentMeth
         this.__attachShadow();
     }
     render() {
-        return (h(StyledHost, { key: 'aebf05239985d34458540500c4c499e27b89ae8b', class: "payment-method" }, h("div", { key: 'dec8e357a96e94ae3756c3e3b7d47bc43c6dcb93', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: 'ea72465e4fbe8f4dff434dcad8ab6e908ff3a3b2', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
+        return (h(StyledHost, { key: '2348e1f435417c0d5379133d3a648760637cbf41', class: "payment-method" }, h("div", { key: '7fbc5c47891a86bead7e62b8df3fad972b91b3f0', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: 'de7b2236e04dc2b8a0dc7e0434c4de66f612366a', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
     }
 }, [257, "payment-method-option", {
         "paymentMethodOptionId": [1, "payment-method-option-id"],

package/dist/module/payments-list-core2.js

@@ -118,7 +118,7 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '3224fa4648e40065343765800160517c23cbf88d' }, h(TableComponent, { key: 'd492e8fd4383492cd8b70c9d50df6d568a2cbf58' }, h(TableHead, { key: 'f490bf8bf89c0babd2b7b58bf8d99467422e32b5' }, h(TableHeadRow, { key: '2c6fbf6f5c076b1c1dbfc3407362f64287da7c94' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: 'a0ca397c345bf388191391208a751db90f214dc1' }, h(TableLoadingState, { key: 'cb09739c0aa7935621078738faecbcc6729abc99', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '9b5bd9da1f1f59e522795b2c8a849cb545d8afe4', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '0d89cfc7ed6c5b984582a03dba8ac3271512a89d', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.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: '2c15dc1c99ae44202cb4b857c1c0ab49252b2a42' }, h(TableFootRow, { key: '296be7b7c00b738dbc4c0087a7d1ab4921d59e53' }, h(TableFootCell, { key: '93bf1aef5ca433b49a83a3711a30cb3d8c9a5aa6', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'de33bf049b17f1409daeaac52fa601ddf11aa464', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'caf37a011b6c7cc178c61ffe4cf6a9d5a5a191df' }, h(TableComponent, { key: '8be3bcd856da13dfd7932d4fc49fea655c9efa6b' }, h(TableHead, { key: 'b81696116e224ca8e8549cc6abeb6f96f211f2c4' }, h(TableHeadRow, { key: '6494e391b3755792d69feee684987e605e3979e7' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: '5ee3267e6dfe675cb95d74b45f901ee2bc4ab974' }, h(TableLoadingState, { key: '66e830d87aa347dfc91dde691a7b30fcd172bcf6', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '644fc974b572f6f543ad7d1cdbf95f884c9a0b29', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'e898bc1b37c8d6edfda9fc4e57c2ef7762ae1299', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.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: '8a39a512dd1ca821877737a75d9b841c9c2246bc' }, h(TableFootRow, { key: '396029ecb6523af607537cb25aaefd9f4d449fc2' }, h(TableFootCell, { key: '6e674ead7dcbf67b757d565762ab4898f28c33fd', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '550e7d3e45ec694013221fbcdcd41e8f821a37d6', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],

package/dist/module/payout-details-core2.js

@@ -74,9 +74,9 @@ const PayoutDetailsCore = /*@__PURE__*/ proxyCustomElement(class PayoutDetailsCo
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '79a9fca76a04f85158b3a0fab953bfc45814b3e9' }, this.loading && h(PayoutDetailsLoading, { key: 'f5b4d16e4fd98086cd70261aa220e5f9a68e29f9' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '2840fa532729b93b86ee64eec7923950d318348b', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'a6e2bf145153df2307ef6b0d1a29f9d10bf80775', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), this.payout.settlement_priority === 'expedited' ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : (h(Badge, { variant: BadgeVariant.SECONDARY, title: "Standard", text: "Standard" })))), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: '75fcbee460dd796e0245a4a490e0de0341ed73a5', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'fbd20466fe208579baaea0282d2e6604230b9107', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '69769324839f561a56bad67846d84bc70e4e4b67', title: "ID", value: this.payout.id }), h("div", { key: 'f431884d2f782ea764357c23e57482672f465848', class: "m-4" }, h(Button, { key: '6a92eb49c2d33717eb7750b6cb005ff231227b1b', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'aeec4b34d58873abd2b2c4bfe010924707f19c89', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '20d0aef076d6312a21d26ea7fc8eed4510a2efab', sectionTitle: "Details" }), h("div", { key: '9bec2b5892f1e1776993acdd005cf0d82e2d81be', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '2555b7af59b56b898565bf716f2f6879d3253445', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '2d8a47d6c9d828eca8574e4c1c5fdff6d354326c', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '87bac39bf999a42f0659b0a1a3e57a8043dc809f', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'cabd31655600c512c8b5ce6fff5548f450970bff', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: 'bb48ff48161f15552c39cac8811abea68398a970', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '28e45b962f7f89e1f57369a1cae1e70f936a42e8', sectionTitle: "Account" }), h("div", { key: 'b5b8da5baa563b80075cdbd46f43561877b3cd1c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '3b89b14e72589f838ec44eed4f80772edb470bd2', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'e828740c47b8b9e02e483c2e9082bd2728a37043', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'ed703dd9d41106825ea5c4e5565f77aa8b7d012e', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '8ee66b765d45ab59ea501a8d3a168c8a43465c70', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '04f7024fbe5c3def51bfc969204c484b471c024e', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
-            h(DetailSectionTitle, { key: 'f59c9b8e87cb13d650873159a2ac47d8ea915173', sectionTitle: 'Metadata' }),
-            h("div", { key: '4984916558e5cf4016972f110b507caaa41dd5e8', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '6659b53990aa222ffa6d65d9332670952efc44f0', metadata: this.payout.metadata }))
+        return (h(StyledHost, { key: '73f8d47c383ee5e75d570551b85b5875756abfa9' }, this.loading && h(PayoutDetailsLoading, { key: 'edfae6a15aeef91fba70f9942157846cf6bf1148' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '15864ba1557f0d815ef9d1cf0c56b943f85d762f', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '8bfc8d9dc2c114b7ce5fd10f70cdd4a6bb8f2390', slot: "head-info", badge: (h("div", { class: "d-flex gap-1" }, MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), this.payout.settlement_priority === 'expedited' ? (h(Badge, { variant: BadgeVariant.WARNING, title: "Expedited", text: "Expedited" })) : (h(Badge, { variant: BadgeVariant.SECONDARY, title: "Standard", text: "Standard" })))), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'd2871ba3d08fa0d1ceb16120a86e44b0cd2409e1', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'cdd88c0018a68aa7f78b1f4713acac38262b763f', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'ec1e542ab548ef4f8d1879a6a7d50511f0b9c2e1', title: "ID", value: this.payout.id }), h("div", { key: '798a4ac96bb892cd19336fd420be31ae078f349f', class: "m-4" }, h(Button, { key: 'bf13d13182906611fe8968f1fdcd55fbe9df2278', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'abfb113b2ca7886ac862809d855cf69db70b59d8', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '418ea65833dc8273395152dc6d03fc90f8f1b499', sectionTitle: "Details" }), h("div", { key: 'ad254148623a0335e83ddb0c9164539fa91fd79e', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '4fae616d86317e6a7d2526fdc173dfd5ebf0f71e', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'b36f365baab61c4cf21d2010d12bd633a11ad725', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'ea27486a634e46f16a1a1ffb42bf24d0930e1411', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'cf3d249060f0922fee694c0fbba55c03144c43d2', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '671eabdea3c75af6219d00bfd433e608ab449281', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '99257f947894416f58a1bdcebd7868a7a976b42f', sectionTitle: "Account" }), h("div", { key: 'fdb3439056d6a58a677b73b3ec77629cd6e57866', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '6a506eb78e41cd10850c724a68f1a0a02e08fdb9', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '659fbffb9ef6051db5787b38d6b4eaf7160b8565', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '6f56bd7d5ef75c434b02ca3989297cc661145bc3', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '746d25a70d38ff9eba5a1984ad320063d9dc50f6', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '4b94711834f28cab64f3685e078069d766471d27', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
+            h(DetailSectionTitle, { key: 'df22f127b90caaecd1c25fa7ceb2679a79422f27', sectionTitle: 'Metadata' }),
+            h("div", { key: 'c56bdeb40259fad8ff249e65db9c8207308e7cc5', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'a9b8c7ee3fe8714c1fa5db79dd879e1b7da683ce', metadata: this.payout.metadata }))
         ])))));
     }
     static get watchers() { return {

package/dist/module/payouts-list-core2.js

@@ -173,7 +173,7 @@ const PayoutsListCore = /*@__PURE__*/ proxyCustomElement(class PayoutsListCore e
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '0e17374fe5656aebfb8ce0c054ac131a2ca7cc33' }, h(TableComponent, { key: '61ce9e69c6084d7ce9b6342a93debcb9c2764d23' }, h(TableHead, { key: 'ca28735991630d9362fbb14aae327c9bc646bca9' }, h(TableHeadRow, { key: '43e012787f232dd626cd4025e8c9223865f519da' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'd21bded30edd81274f06d21c5f00ef75d7982ccc' }, h(TableLoadingState, { key: 'a437445d203db926cb32ef81579ef862d2644fa7', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '84accd5ae400e69061cdb66a59dc9272ff5edf1c', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '1f4e9998200515d714a8d1ca9476c4841272515d', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.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: '397b4d811f439511691826e1dc463f38cd97d016' }, h(TableFootRow, { key: '4e94eb5f5294ca470f29988bf11247e2e9576875' }, h(TableFootCell, { key: '6ab3af15817c9c9a184487348c3247ab25aa7f6b', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '8b378185a5f3833ac62e16d5cd07fc89aa9462aa', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '01d97366d41b48cacb348dd46be971daf830a8d5' }, h(TableComponent, { key: '9aa664d16807d0e90c349fea0d34784a1fe9cf25' }, h(TableHead, { key: 'f0039efcf46d63b8d426c99e9e5e4cfb7ff20ad7' }, h(TableHeadRow, { key: '3b9cd46c7cf917e8a83c5ac8c0bfbd35824b4b52' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: '2dab432894511eabf5db8738763d33aecc632935' }, h(TableLoadingState, { key: 'f1442909f04f84becb562584fedcd12b08d4b3fc', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'af4311a420da0ef6624f470bcd3f579fdb3d912d', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '4fe8e5492b63b34f79fc52053a180329533b3689', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.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: 'd6fa03ee9a542576814a81cc5705688392940753' }, h(TableFootRow, { key: '9954754fe9af5e1c30d18ebe6d65bac770338e43' }, h(TableFootCell, { key: '59354502b1c467a4ae4177b3e3c11cc9782255f3', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'acddece313974ac003ae7375be70a655039df38f', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],