@justifi/webcomponents 6.0.0-rc.2 → 6.0.0-rc.20

package/dist/module/modular-checkout.js

@@ -1,14 +1,16 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as checkoutStore, o as onChange } from './checkout.store.js';
+import { c as checkoutStore, o as onAnyChange, g as getAvailablePaymentMethodTypes } 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, P as PaymentMethodTypes, a as ComponentErrorCodes, d 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 { P as PlaidService } from './plaid.service.js';
 import { i as insuranceValuesOn, h as hasInsuranceValueChanged, a as insuranceValues } from './insurance-state.js';
+import { b as PAYMENT_MODE } from './ModularCheckout.js';
 
 const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({ onSuccess, onError }) => {
     var _a;
@@ -71,19 +73,19 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
         this.__registerHost();
         this.errorEvent = createEvent(this, "error-event", 7);
         this.submitEvent = createEvent(this, "submit-event", 7);
-        this.paymentMethodChangedEvent = createEvent(this, "payment-method-changed", 7);
-        this.savePaymentMethod = false;
+        this.checkoutChangedEvent = createEvent(this, "checkout-changed", 7);
+        this.plaidService = new PlaidService();
         this.handleApplePayCompleted = (event) => {
-            const { success, token, error } = event.detail;
+            const { success, token, paymentMethodId, error } = event.detail;
             if (success && token) {
-                this.applePayToken = token;
-                // Complete the checkout with Apple Pay token
-                this.submitCheckoutWithApplePay();
+                checkoutStore.paymentToken = paymentMethodId;
+                checkoutStore.selectedPaymentMethod = { type: PaymentMethodTypes.applePay };
+                this.submitCheckout();
             }
             else {
-                console.error('Apple Pay completed but failed:', error);
+                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',
+                    message: (error === null || error === void 0 ? void 0 : error.message) || "Apple Pay payment failed",
                     errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
                     severity: ComponentErrorSeverity.ERROR,
                 });
@@ -91,59 +93,48 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
         };
         this.handleApplePayError = (event) => {
             const { error } = event.detail;
-            console.error('Apple Pay error:', error);
+            console.error("Apple Pay error:", error);
             this.errorEvent.emit({
-                message: error || 'Apple Pay error occurred',
+                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;
+            checkoutStore.paymentToken = undefined;
+            checkoutStore.selectedPaymentMethod = undefined;
         };
     }
-    savePaymentMethodChanged(newValue) {
-        checkoutStore.savePaymentMethod = newValue;
-    }
     connectedCallback() {
+        console.log("connectedCallback", checkoutStore.checkoutLoaded);
         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) => {
-            this.paymentMethodChangedEvent.emit(newValue);
+        // Emit checkout-changed whenever any store key changes
+        onAnyChange(() => {
+            this.emitCheckoutChanged();
         });
     }
     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();
@@ -160,9 +151,18 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
         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 }) => {
+                    this.updateStore(checkout);
                     if (checkout.status === ICheckoutStatus.completed) {
                         this.errorEvent.emit({
                             message: ComponentErrorMessages.CHECKOUT_ALREADY_COMPLETED,
@@ -179,7 +179,6 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
                         });
                         return;
                     }
-                    this.updateStore(checkout);
                 },
                 onError: (error) => {
                     this.errorEvent.emit({
@@ -187,185 +186,217 @@ 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.checkoutLoaded = true;
         checkoutStore.paymentMethods = checkout.payment_methods;
         checkoutStore.paymentMethodGroupId = checkout.payment_method_group_id;
         checkoutStore.paymentDescription = checkout.payment_description;
         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;
+    }
+    emitCheckoutChanged() {
+        const detail = {
+            availablePaymentMethodTypes: getAvailablePaymentMethodTypes(),
+            selectedPaymentMethod: checkoutStore.selectedPaymentMethod,
+            savedPaymentMethods: checkoutStore.paymentMethods,
+        };
+        this.checkoutChangedEvent.emit(detail);
     }
     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');
-        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);
+            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;
+            this.applePayRef.removeEventListener("applePayCompleted", this.handleApplePayCompleted);
+            this.applePayRef.removeEventListener("applePayError", this.handleApplePayError);
+            this.applePayRef.removeEventListener("applePayCancelled", this.handleApplePayCancelled);
         }
-        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;
-        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 Apple Pay token is available, return a placeholder since we handle it differently
-        if (this.applePayToken) {
-            return 'apple_pay_token';
-        }
-        // If we have a payment token from the store (set by tokenize-payment-method), use it
-        if (checkoutStore.paymentToken) {
-            return checkoutStore.paymentToken;
+        }));
+        if (tokenizeResult.error) {
+            return tokenizeResult;
         }
-        // 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;
-        }
-        return token;
+        checkoutStore.paymentToken = tokenizeResult.id;
+        return tokenizeResult.id;
     }
+    // set the selected payment method to the checkout store from outside the component
+    async setSelectedPaymentMethod(paymentMethod) {
+        checkoutStore.selectedPaymentMethod = paymentMethod;
+        checkoutStore.paymentToken = paymentMethod.id || undefined;
+    }
+    // if validation fails, the error will be emitted by the component
     async validate() {
-        var _a, _b;
-        // If Apple Pay token is available, validation is already complete
-        if (this.applePayToken) {
+        const promises = [];
+        if (checkoutStore.insuranceEnabled && this.insuranceFormRef) {
+            promises.push(this.insuranceFormRef.validate());
+        }
+        const isNewCard = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.card && checkoutStore.selectedPaymentMethod.id === undefined;
+        const isNewBankAccount = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.bankAccount && checkoutStore.selectedPaymentMethod.id === undefined;
+        // For new card/bank account, validate payment method + billing.
+        if (isNewCard ||
+            isNewBankAccount) {
+            if (this.paymentMethodFormRef)
+                promises.push(this.paymentMethodFormRef.validate());
+            if (this.billingFormRef)
+                promises.push(this.billingFormRef.validate());
+        }
+        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: 'Validation error',
+                    errorCode: ComponentErrorCodes.VALIDATION_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return false;
+            }
             return true;
         }
-        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) {
-            promises.push(this.insuranceFormRef.validate());
+        catch (_a) {
+            // If any validator throws/rejects, consider the whole validation failed.
+            return false;
         }
-        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;
-        // 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({
-                message: 'Please fill in all required fields.',
-                errorCode: ComponentErrorCodes.VALIDATION_ERROR,
-                severity: ComponentErrorSeverity.ERROR,
-            });
-            return;
+        const isNewCard = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.card &&
+            checkoutStore.selectedPaymentMethod.id === undefined;
+        const isNewBankAccount = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.bankAccount &&
+            checkoutStore.selectedPaymentMethod.id === undefined;
+        const isPlaid = checkoutStore.selectedPaymentMethod.type === PaymentMethodTypes.plaid;
+        const shouldTokenize = isNewCard || isNewBankAccount;
+        if (shouldTokenize) {
+            const tokenizeResult = await this.tokenizePaymentMethod(submitCheckoutArgs);
+            if (tokenizeResult === null || tokenizeResult === void 0 ? void 0 : tokenizeResult.error) {
+                this.errorEvent.emit({
+                    message: tokenizeResult.error.message,
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return;
+            }
         }
-        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) {
+        // For Plaid, perform exchange at submit time using stored public token and link token id
+        if (isPlaid && !checkoutStore.paymentToken) {
+            const publicToken = checkoutStore.plaidPublicToken;
+            const linkTokenId = checkoutStore.plaidLinkTokenId;
+            if (!publicToken) {
                 this.errorEvent.emit({
-                    message: sezzleResult.error.message,
+                    message: 'Missing Plaid public token. Please connect your bank.',
                     errorCode: ComponentErrorCodes.TOKENIZE_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,
-                };
+            try {
+                const response = await this.plaidService.tokenizeBankAccount(checkoutStore.authToken, checkoutStore.accountId, publicToken, linkTokenId || undefined, checkoutStore.savePaymentMethod ? checkoutStore.paymentMethodGroupId : undefined);
+                if (response === null || response === void 0 ? void 0 : response.error) {
+                    this.errorEvent.emit({
+                        message: typeof response.error === 'string' ? response.error : response.error.message || 'Failed to tokenize bank account',
+                        errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                        severity: ComponentErrorSeverity.ERROR,
+                    });
+                    return;
+                }
+                const paymentMethod = response === null || response === void 0 ? void 0 : response.data;
+                const token = ((_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.bank_account) === null || _a === void 0 ? void 0 : _a.token) || (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.token) || (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id);
+                checkoutStore.paymentToken = token;
             }
-        }
-        else {
-            const paymentMethod = await this.getPaymentMethod(submitCheckoutArgs);
-            if (!paymentMethod) {
+            catch (err) {
                 this.errorEvent.emit({
-                    message: 'Payment method tokenization failed.',
+                    message: (err === null || err === void 0 ? void 0 : err.message) || 'Plaid exchange error',
                     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,
+            });
+            return;
+        }
+        let payment;
+        const mapTypeToPaymentMode = (type) => {
+            switch (type) {
+                case PaymentMethodTypes.card:
+                case PaymentMethodTypes.bankAccount:
+                case PaymentMethodTypes.plaid:
+                    return PAYMENT_MODE.ECOM;
+                case PaymentMethodTypes.sezzle:
+                    return PAYMENT_MODE.BNPL;
+                case PaymentMethodTypes.applePay:
+                    return PAYMENT_MODE.APPLE_PAY;
+                default:
+                    return undefined;
+            }
+        };
+        payment = {
+            payment_mode: mapTypeToPaymentMode(checkoutStore.selectedPaymentMethod.type),
+            payment_token: checkoutStore.paymentToken,
+        };
         this.completeCheckout({
             payment,
             onSuccess: ({ checkout }) => {
                 this.submitEvent.emit({
                     checkout,
-                    message: 'Checkout completed successfully',
+                    message: "Checkout completed successfully",
                 });
             },
             onError: (error) => {
@@ -377,25 +408,16 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
             },
         });
     }
-    async setSelectedPaymentMethod(paymentMethodId) {
-        checkoutStore.selectedPaymentMethod = paymentMethodId;
-    }
     render() {
-        return (h(Host, { key: '1b0c613494dde43962dc963618d5a81c4423b218' }));
+        return h(Host, { key: '2cbac33c57dd2cad327f156a4630b1dba9bf3252' });
     }
     get hostEl() { return this; }
-    static get watchers() { return {
-        "savePaymentMethod": ["savePaymentMethodChanged"]
-    }; }
 }, [256, "justifi-modular-checkout", {
         "authToken": [1, "auth-token"],
         "checkoutId": [1, "checkout-id"],
-        "savePaymentMethod": [4, "save-payment-method"],
+        "setSelectedPaymentMethod": [64],
         "validate": [64],
-        "submitCheckout": [64],
-        "setSelectedPaymentMethod": [64]
-    }, undefined, {
-        "savePaymentMethod": ["savePaymentMethodChanged"]
+        "submitCheckout": [64]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/module/package.js

@@ -1,5 +1,5 @@
 const name = "@justifi/webcomponents";
-const version = "6.0.0-rc.2";
+const version = "6.0.0-rc.20";
 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: '78772ac113e59c6a0dfb11b38807cbdd42ca2b75' }, this.loading && h(PaymentDetailsLoading, { key: 'ee7b54bb8679f20fc2d7665ef335320154f1631c' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: '09f20b99d15bd751771de65edf1770ad0e3e4caa', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '0a070793ef25425601400c8a0139d84123adcb38', 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: '5d4c3fd1f483c6a9cba7098dbba7fb7df9e62459', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'a770d473ef8ead583dca3d261fc22daeb452aa42', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'd0e8a38cff4bdccc6347108ecbdc90e200613470', title: "ID", value: this.payment.id })), h("div", { key: '001543a66055203a430fb3231eedb39cc4bd4d31', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '37229e3e35782dc9e3bc56e7ab5411719507f55e', sectionTitle: "Details" }), h("div", { key: '08a7f2025131fec223ef014374e5784a6c97e531', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '92643e94e0f8f70d09825eb8e2a658286f331464', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '2db9994c24e29ba4b4ca1935015b6b94733fdd1c', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'baa2601246817358cfdbc587c354304d18e61de6', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '0809e47782815c57213be29e1e8d6b7703907e50', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '89c6dedc355492b70bd91dbe9d1fdd6d288c06d9', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '278cca0991d63079c29da77be1625b5a52f64541', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '5622513e3ded892acb9667be6579bab5a2fe17af', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'b9970bf7af2831b75a41a346813bfbc7be54a4e3', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '2a6e7ded24a5849672547322b7f507487b9a1fd4', title: "Description", value: this.payment.description }), h(DetailItem, { key: '363a8b9e8a5ee160887498bf197e27ec6be58eda', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: '1cf6b816e8138fe5e56b3128eaefb43bd9111139', sectionTitle: "Payment Method" }),
-            h("div", { key: '363a98244887cbc9b22db1d00aefe7c57fa11e6a', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '0b55c6a07eb581fab9fd3e8a859c09ee743a9197', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '80fdad59678b1ff7db5d8d0d2d9ff7d3f358155e', title: "Payment Type", value: "Card" }), h(DetailItem, { key: 'd470dc1614d83da766962075007e4834a0db0e9d', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '95ae2faca13ea63373a48d49df52f06338b5c7d7', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '47d57b3ceb2ee5d703ba1b12424c529464fed91e', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: 'a94fc292445a0d8d3d77b0702fe5f19efc432634' }, this.loading && h(PaymentDetailsLoading, { key: 'd07e44b295fd5ce424a0a67d21e3c4ceec4634f4' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: 'c6cd0c034c948b4b96415b5bde6a3808dc1686e2', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'cff0b6a11617d68a42f20d6e3631097bafc34971', 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: 'a143d34fd230aa855286b1252b8e032f94fbd9a9', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '96e5af4a6c37667a4be5bf27cdfec6a5ea3978fd', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '76f2fd4b5569ad4f6463fb36984e3d4309235473', title: "ID", value: this.payment.id })), h("div", { key: '9d5b04c789c248b358ffecfebac6b62a1d8f0a27', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '78f20430c4935b222c954fdc6eba89e715f668fc', sectionTitle: "Details" }), h("div", { key: '77d314983116b6dd2fc9989c1987d2371b5902b7', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '41c4eb6797577967d4ee6bc6a546faf62bca48c6', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '51308e304e515290f1d4e96fda9ed0b7c9523055', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'e6d24cb563963c8a540969437dd70674f04c02fc', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '1640fe0c210efb6193cc791624fd274299516f4e', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '9f2f34ef1aa4e2ec522ceda4bcdf398ede745c65', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '9f1cf33ce4a80dc55efc2d88882e9f52933e4aaa', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '2ec3eca801e5187912dc8107644270da03679a79', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '14065f819a71be0bee5a7980f66d88852a96a152', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '7c5f72aaf86eaf7ef035cd359822988573a42862', title: "Description", value: this.payment.description }), h(DetailItem, { key: 'b1081bad614684d8205ca3377e16bd2377d6da88', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: 'a3e655f58e6482800dc53e55c5dd17d9e41ad08d', sectionTitle: "Payment Method" }),
+            h("div", { key: '225667fced83ad89e25cfc19c950b870a2558308', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '58c44b427b356a3576584c6a59301efcab0ed67f', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'a2b60b522a6fbed58ad06f0df88e551070faf752', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '6e094728a62fcdd01d0fdadab0bce26894dcd4b6', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '3d703d83c3c7a115c6e64227a417997b63cf8748', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: 'cf5dd3615ce5770f071aad7f1144862f00af760d', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: 'de95204583c5e94eca5b8edd14f7dacb8a6e12aa', sectionTitle: "Payment Method" }),
-            h("div", { key: '0f0703066af1aa060eec503844cedecbb5319dbe', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '7eed468aefc9b85f92e5c7b910b9d730e5a02e33', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '6da4304e0da2055c9d4877bb54f59920c2234356', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '9bac816e32f978caeb926f0f3c6b8b0dc4586fc3', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '943a9c4d7f7db5a3dce927b35556087f89264160', title: "Account Owner", value: this.payment.payment_method.payersName }))
+            h(DetailSectionTitle, { key: '8b167fe0967859af1555245634e4f6cdaae77ccf', sectionTitle: "Payment Method" }),
+            h("div", { key: '3b84740a7e8f792b4f3987a88bff3e85003ea549', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '1ef1e3781ea046145c58c721f1abfb2183e81db1', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '383f4756aac8901eef21786d9c9c6ff5ce097d7d', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '3cbb0f11eaf47b3b3923d3371f33df95ca022bd8', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: 'b122e28ddb446b03b0a70b6cf3ac23fe84fd945d', title: "Account Owner", value: this.payment.payment_method.payersName }))
         ], this.payment.metadata && [
-            h(DetailSectionTitle, { key: '9c229051516566209d5b7fc3da2e2c5d41005201', sectionTitle: 'Metadata' }),
-            h("div", { key: '36ea2b841735fc16e858d0fc622bd1145b21657c', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '554d789b6f59982cc70e63e32169b38d8aa459bf', metadata: this.payment.metadata }))
+            h(DetailSectionTitle, { key: '5b6d6c2ade6badd80f8b6c4a4c6427710ba9ac66', sectionTitle: 'Metadata' }),
+            h("div", { key: 'a3d59ae07f2601b0895624c0a640693ef076b71e', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'b61349ed2f6536b2131b05ed0e8e337733309117', 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: 'a9d1a1ac11a9a39fa8e9e27fbab66793289c1538', class: "payment-method" }, h("div", { key: 'e9672061e4e5fa5244a51fd3b4cf34ca996f6ffb', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: 'a4f0985f9c9f609c14e664976c132c2bedf8db38', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
+        return (h(StyledHost, { key: '276e7685b6f5b7430fdac887fa5f270245011f6d', class: "payment-method" }, h("div", { key: '032431a1a0e3e97077c84f02288e3e0d1334e230', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: '33a53344736a2a5d8546cbec24cc6c4aaebf7629', 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: '46dd5932d242bb0be852b76bdb030735d7e17f70' }, h(TableComponent, { key: 'ba8514e6840054ac614ec3e20086442ee386f303' }, h(TableHead, { key: '0a3495b12b1bcde7f7ff845a759a00a6ec4f86b6' }, h(TableHeadRow, { key: '01c0c3d37185252b254afe205797fab85d3007b2' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: 'f5b9b2d8ffac197fc6df33ca4aa77344f2137f77' }, h(TableLoadingState, { key: 'ff4314485693a2472b683567021e35bd609e2850', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '6c0c381354f96026b76a11eed925b49bf2169ecd', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '823a6fa86f79a89398de22d48c0ab4b554c2cd54', 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: 'fe4809a1a5c43dd4745bc76fccdc66937b88a315' }, h(TableFootRow, { key: 'f75e79495dc130fd3d604c0e7c29fc5dc1e97e94' }, h(TableFootCell, { key: '3d30257ba1ad94eab852b5abaed9777552403da1', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '7dd714fca51b59d138a6ba27a8f0f6e81fd964de', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '0f667b8996650351ee636d548437217696ba8845' }, h(TableComponent, { key: 'ea49b5f4a53b03525a960954df711f39ee1ec41d' }, h(TableHead, { key: '7e06f612e6aa80267abba505c5b44506a907ae1a' }, h(TableHeadRow, { key: '561827555ab274f70fe4e2e08442689b82f8b2c9' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: 'a1f724d553ca43fbe20aeeb1bcbedf87e7d5b917' }, h(TableLoadingState, { key: '27c9f9e459857cf208f9bcb1a5a81f02fcac0850', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '546e87c7198e6b7efaf1dde4dba0e2bc9dd9e4a7', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'cbb35d379ac52943549b58128af24f682b53254f', 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: '4b8de6a6841bd6f087f8819febd3136742e535eb' }, h(TableFootRow, { key: 'cb2f446cd73c72e551378d73d5fb7089bcf9b8a0' }, h(TableFootCell, { key: '01098f6891794529ddfc1d7b1303706313694316', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'a907422b1d6246570d14862478154465c4ad59c9', 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: '84ad924d9a7697cf7fd1f7638617925b52600267' }, this.loading && h(PayoutDetailsLoading, { key: '4ba191c16f034b4e136f2a6d96a44a7e1c71b352' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '84561101cfb511d034309906e281a36b9adba5d0', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '844df9068a80e7dfeffd2856805e5855c36842ef', 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: '5b3ecbec2c7e056afd085e21e7895f7919c0b638', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '1f0b2a3a31b0ff2a0829daae285bd2e9fdaaadcb', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '29ac2409362d285ca42cc57d55661281d35e7c39', title: "ID", value: this.payout.id }), h("div", { key: 'ceb5c66069d1c7404e355aeeeeb2e167cb4e8f55', class: "m-4" }, h(Button, { key: '206c57a99b0bc35c8db822507936022b8e51b89b', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'a9b39de96d09d4b0c87384da5bbf7d8f33e48bc7', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '03735918d82a3af539d79b88edc2b62ca2ebe03a', sectionTitle: "Details" }), h("div", { key: '347a72ad86b6dd8917022bb3d41c1ea51afe05f5', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '644ae816ca6391e06e8cafff85773892fdffb3b7', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '7970ee36e7575b0fb6432df46d128974fc54ef9a', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '8d3b06b5af09992d24ad5aa5d4bc935ae40193fb', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '2c147836ca746a8604bc8ca42a23ef9b2b78f80a', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: 'c9c7fb58f4e1d6d24c7ab0a60742d48214a88a9c', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '6261217268188afab893556f8f7eea2c72fa285b', sectionTitle: "Account" }), h("div", { key: 'd1b447792330f8f5d6e11533c7ccd27578325a4f', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '199170c19d35c73f14f46a19eb9c743f12461779', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'c6fb1a95d15547b1abc2ac95c83e865167b500a9', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '21c1ef80ae9d2d122e30b6b94585cbfea6dbe167', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '31f0db976c9abec3e3c9f228ed8b66c83cb134cb', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '87cc64ff4ac69c51e0932f7981f7da52565101ff', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
-            h(DetailSectionTitle, { key: '81b6f3c633b802afb5f0f5314b234f8ef0e1ef31', sectionTitle: 'Metadata' }),
-            h("div", { key: 'ec972893084294e690037e146b9e91783f461267', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'cef2518b84f1791157084b7d7cfe872963851edc', metadata: this.payout.metadata }))
+        return (h(StyledHost, { key: '142cd93a5538d48542c001dfaf8ecf0a8f0649e1' }, this.loading && h(PayoutDetailsLoading, { key: 'e4a301d09a48776c7cbc3c9b606e42558748301b' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '65c7a12cf23056d1940d08b0c3ff96368c601720', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'ef299affbf2facfb03f4af8f7d8933fb7cc0dac5', 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: '585d7d174f20f6b49e3fce34e0e236a89b90d083', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '6066bfdaef670375ae97453d84422228d2a5eead', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '7e526cbd6e31ca6139c8f31e7946749a59905fea', title: "ID", value: this.payout.id }), h("div", { key: 'eeeab1a03a0097c3c1be036d6f3f2a72dfb376dc', class: "m-4" }, h(Button, { key: 'ac90d236d37a925c157b99e1c348128bb0835060', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '3d01f52695bb407cba4a2166ebbd90d09580cbe9', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'ec7727a7c9a93bd51ae670f20c1453538676a95c', sectionTitle: "Details" }), h("div", { key: '469fad5f27810729811fba91c4a4275d27cbf18e', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '5f32a3e8631fdd2d047f5ccd933e200322d50de2', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '807284a840687b7257176366ff06f5150ba4a0ad', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '908464c42582f596e114c18f873ec3b3eac332ed', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '736b86cfb1cbfaad58e042e6a936db4237e5fbb7', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '919453e082a6f8534df07f3fd2cd0ffc6bf81539', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '7b033d532fa94ddb0a6e53861d126a50601f8bdf', sectionTitle: "Account" }), h("div", { key: '373c6745a0ab57d21fa88e9a470e63bd8c0ad999', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ea140c2b46fd503a85c97ec9cd5859fa8c0fc8e3', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'd94a8db9bdc0f5ab359e3cb7b9c0cfb1002db550', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '5317a5bef89080a7e70732025ab030674fcb79c3', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'f46e83995276c83361933381bc620336ef44f166', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '933aee12e24e152a5a8628f303b7c7e9709baf64', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
+            h(DetailSectionTitle, { key: '1e5233f88f9254c0a5525032470273e2f58ed59c', sectionTitle: 'Metadata' }),
+            h("div", { key: '63678c1f4eb207a4aced6f132e95c7cd646da9a3', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '7e5095e9be051524e8ab17ffe380b1315c5f7c98', metadata: this.payout.metadata }))
         ])))));
     }
     static get watchers() { return {