@justifi/webcomponents 6.0.0-rc.1 → 6.0.0-rc.11

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,48 +73,67 @@ 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;
-    }
-    savePaymentMethodChanged(newValue) {
-        checkoutStore.savePaymentMethod = newValue;
+        this.checkoutChangedEvent = createEvent(this, "checkout-changed", 7);
+        this.plaidService = new PlaidService();
+        this.handleApplePayCompleted = (event) => {
+            const { success, token, paymentMethodId, error } = event.detail;
+            if (success && token) {
+                checkoutStore.paymentToken = paymentMethodId;
+                checkoutStore.selectedPaymentMethod = { type: PaymentMethodTypes.applePay };
+                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;
+        };
     }
     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) => {
-            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();
@@ -121,15 +142,26 @@ 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 }) => {
+                    this.updateStore(checkout);
                     if (checkout.status === ICheckoutStatus.completed) {
                         this.errorEvent.emit({
                             message: ComponentErrorMessages.CHECKOUT_ALREADY_COMPLETED,
@@ -146,7 +178,6 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
                         });
                         return;
                     }
-                    this.updateStore(checkout);
                 },
                 onError: (error) => {
                     this.errorEvent.emit({
@@ -154,12 +185,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 +198,204 @@ 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;
+    }
+    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');
+    }
+    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;
+    }
+    // set the selected payment method to the checkout store from outside the component
+    async setSelectedPaymentMethod(paymentMethod) {
+        checkoutStore.selectedPaymentMethod = paymentMethod;
+        checkoutStore.paymentToken = paymentMethod.id || undefined;
     }
+    // getAvailablePaymentMethods removed in favor of checkout-changed event
+    // 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);
+        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;
+        }
+        catch (_a) {
+            // If any validator throws/rejects, consider the whole validation failed.
+            return 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;
+        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) => {
@@ -290,25 +407,16 @@ const ModularCheckout = /*@__PURE__*/ proxyCustomElement(class ModularCheckout e
             },
         });
     }
-    async setSelectedPaymentMethod(paymentMethodId) {
-        checkoutStore.selectedPaymentMethod = paymentMethodId;
-    }
     render() {
-        return (h(Host, { key: 'd454d321b1a7a6e3b4097c94fbb05e02ce3e36a9' }));
+        return h(Host, { key: '6d77d6adf39e471c1fac481dee997b71ebc01e24' });
     }
     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.1";
+const version = "6.0.0-rc.11";
 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: '5bb9e4baea06de90dba2e9469f14c52b68e65249' }, this.loading && h(PaymentDetailsLoading, { key: '5cbc91375b6d80958e66fad56e1e6d7ab2e15b76' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: '7eedb26bfa0fb1cf1656c8bbade79c8cdbdf9764', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'e7912d448ac140a8164ad7c285ab95ed779d61e4', 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: '1cd9d26abe03b8994c84b6b1d9c06fc75c4705e8', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '4330bf0ddd130a2103ae00abb4ac787a2968e1b1', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: 'e5336b00ebc442a3d52e74e4f1f75442c06edcf9', title: "ID", value: this.payment.id })), h("div", { key: '0e07bc37f9fbb547c479167ee9e5991a59aeb54f', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '6d30461904ce2576bf3af983a6aa856c2b4fb52d', sectionTitle: "Details" }), h("div", { key: '6a1d68cfa2c03dc496768f7d29867c77aff39856', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '2669711d00298e9a84582149f423bcbeabb60de2', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '3a93e845f845d0fd17409e3e44c096f3bb7563dc', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '4be864f58f7ab22e0e5079dc924d8bd02f3b7dd8', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '14956ec82cf01fdec85e76170aeade66273d6a1d', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '06cd1d7930f6c428be0c736e918147c7aa94cd80', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '98e27c002566c3e9a093ab743951bf56501fd2a2', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '54ab8e011a08814fe3d970f0ab7a93d558b68e22', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'f9875ea8913f6d46adac4175de6dfc284cedba4f', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'ccd5a4a44663cf14b76141e91c69d799055f83e2', title: "Description", value: this.payment.description }), h(DetailItem, { key: '4136e5f730f569bcb63e87cea1022d996596f2a0', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: '3a7ef3be13a9a8d8573eb5766d8d4b120baca19d', sectionTitle: "Payment Method" }),
-            h("div", { key: '695558eded8ee2cff291bed4a13d02482b619565', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '1c678964543ced0c4f1a5835fea8234322f732ae', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '5b1c9dfda2f8b499e6d0c9fae288e58a771d63d7', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '0aecf598551b5685a36dafb8cf54802cd3914482', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'd59d46bef4cecf2a1dcb73c9af696e6aabf5776b', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '56588cdf9c1535cf8aa22dd56a94608805f241aa', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: 'f2b186044ccc85a72cfcb8fb144ee77667e15ba6' }, this.loading && h(PaymentDetailsLoading, { key: 'edb17ed3599ad66988a15d9834e17e49408b9507' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: '62bf6dd11a6c6b31dcece28cfc375ae1eb6f9344', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '40a3d2f1d327efe61d186f2b24126ec52bcf28bc', 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: '83903da52e88d24f09667e1aba282377f35f8e64', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '4f87ad37c9a2b8f8a1ecd181af3b30dbf73aea57', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '52711a7db01db2fb3899fd7defac22021e339e99', title: "ID", value: this.payment.id })), h("div", { key: 'fce421c4a9803e24e05685fa50c0695584ebc5db', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '0734f86c73fa6ec4aee0d65c7ead7f0ae2f36cc2', sectionTitle: "Details" }), h("div", { key: '70df3fc23267c96de447842859ef570b3208a719', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '56a458e4e555e0c6eec08dfc5741e497a2d34686', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: 'f38251a639c1dc0f3299184525074cc312a495ee', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '24bd2a8275278305655b381ba364f7ef352507e5', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '501de65bfda2966ee0ba78d5a7ef9b7f358549f1', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: 'd0296e2992ba58514e658b7b32ddfc28c5c833f5', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '5b5ee68f54dab15339abcff35e8c7fd80504030b', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: 'ee1f690a6ce8f4b11376c7f92d9b7869642ba0a3', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '7857ee342d7b3af9cbd8e833c9ecc8947c74b5cd', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '38fdde533028fa041c6d22cf1727461fe8691ace', title: "Description", value: this.payment.description }), h(DetailItem, { key: 'f629e61d7e7dfbbc74ff3590abf8ce9a5cc3614d', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: 'ee90457c952f0ac7217556e8566972fb43b29984', sectionTitle: "Payment Method" }),
+            h("div", { key: 'd6007e904c9f45d48f02ce675d75f451b09a344b', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '5fd5fae2793f2d1cb7b63e405c9b865458228e8f', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '7e6d640a4ed7b4842d3b502901a177a49ae30637', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '6d593f6ef45f8e286c3262750bdef8f686d2dd0a', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '89301ddd84e5cefd3c6576506e590a7fb1d98749', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '8119c2e7ccf0e4c76d93a7033311a244e3b16921', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: '84f146ebe0e237768df2fd8e16c2295bdb86a49a', sectionTitle: "Payment Method" }),
-            h("div", { key: '440b505ff883eadf73ecd3ca542d0feeadb8e8a8', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '2f57116a3c0a9522a18866d88e18d5856fa53b2a', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'c0a7c01e8c4eeece3771d29938268fd324e647c6', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '2968ea77dbc987591dd2418d544c4f21027694d6', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '38f7129625d8d6a16818dc07343eda9ba31dd19c', title: "Account Owner", value: this.payment.payment_method.payersName }))
+            h(DetailSectionTitle, { key: 'b410bff21158a0800cddbd46c622de479315313b', sectionTitle: "Payment Method" }),
+            h("div", { key: 'f5595402cdc5f3fa2a5e19e99d6e0a21f8dbf0eb', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '6f157f4c6f0c915a47f597dd20883b4f2acfd74a', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'c1872ab9da698076ba617bbaeb7ef6790f5ea487', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '0fe4b0af3aff5f03e660dbe9d4286fc3981e6ada', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '6920ce8ae22fed7bd3e12ec48e0197e0e6675257', title: "Account Owner", value: this.payment.payment_method.payersName }))
         ], this.payment.metadata && [
-            h(DetailSectionTitle, { key: 'bf0d94665bae468091534cc74219ee786b8b87f6', sectionTitle: 'Metadata' }),
-            h("div", { key: 'f92f3a4f1f2c6fa6ae6cbc32c0868f22d68b9326', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '21937177748b5322178ae75db147cc3185db78ca', metadata: this.payment.metadata }))
+            h(DetailSectionTitle, { key: '4d0be28ad0075d2ff0a5565c90d202f767d70607', sectionTitle: 'Metadata' }),
+            h("div", { key: '88a5700230f8585eec6ea505fa5f9b05fa9f21ac', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'a9e61b8eef8e0c21ae4359e18e05856734661320', 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: '8055addaf7563d5deb7d9b31794bf36e1d273a0d', class: "payment-method" }, h("div", { key: '5fb85a3e5c94eff4e397ba5b23d3fb7a34e4c312', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: 'b36c23bb6eeee3fc7325ea6d9b46aed4fc43c21c', name: "paymentMethodType", value: this.paymentMethodOptionId, checked: this.isSelected, label: this.label }))));
+        return (h(StyledHost, { key: '42003535aac99ae51b47511facb02f602dff703d', class: "payment-method" }, h("div", { key: 'c1ad6051d7b2dd88d2a76cd94ed69fe3f7408c7d', class: "radio-list-item p-3", part: radioListItem, onClick: this.clickHandler, hidden: this.radioButtonHidden }, h("form-control-radio", { key: '98ea069afd3e9d09ca8599ab35f998294046463a', 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: 'f9fe216ea30123f3a7613b74371492fdefc1f4bc' }, h(TableComponent, { key: 'b081beffb783c9e351092947864649518fbe2dfc' }, h(TableHead, { key: 'e2e47a2122561e93163bf4d3794fe6b139a30ee9' }, h(TableHeadRow, { key: '0bb6d21213e5ab335c14057e69ecca70b0381578' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: '9e411aaa4fb387fe4ee3d129f05e23438313ab65' }, h(TableLoadingState, { key: '42659fe4d9f41bff6165fc5016d6dc441e3d294a', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'b5fb94bf87bae350b48fc6969acb3477eeeb2b1d', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '220b648eabf17bfd7006b23399fc38f17e5b6952', 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: '1b77f14df195e1867f6ba037757350cc7b4fab96' }, h(TableFootRow, { key: '9baa94de37beec7a33fff9c9bbb83bdf2ad8fc16' }, h(TableFootCell, { key: '08a3c1d8ba7017f6bc6c60b4b33c319f59654731', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'a3518ce532a7539c092dda6cae4bc318147d92ed', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '76307f63befbd801b2268273998a68c364789765' }, h(TableComponent, { key: 'd7e218e903b790723eed0d30bdde0df40eb33c66' }, h(TableHead, { key: '34b69cab817edf8553550f590f904d345d29fdb4' }, h(TableHeadRow, { key: 'b069e490f737de01e1b86ccfb1b3022938c409a3' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: '35a3714a44e7b8a7092557209c527e8874901546' }, h(TableLoadingState, { key: '299d8898d12b49511d2e13b2a3a441ee4ee83814', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '5a3a6e90e7d397dac6e1525150195aaf70e4b9b1', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'ee92c41b21951e1427dc4c8a7e5afb2cb8639a29', 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: '5daca871f3d06f99442fcb8d769c34c1620c88cc' }, h(TableFootRow, { key: 'accf3d1930b2cebf2c655ce278ed8c721717b909' }, h(TableFootCell, { key: '8ea7ab50123a5c98a44b170c3961a8b61bd6c6a0', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '47f5f719048054f691da8e2d174ec2bb783268f5', 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: 'f8f7a846e1c82a2d90231060286e8d2a906e1988' }, this.loading && h(PayoutDetailsLoading, { key: 'd626ef6861f8eba2235c0405e2229c75dc7972c6' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '209795b172c2a5250726f56a767f8c1dc6e8723f', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'ab602bc00824f5364eb38366f5a11b7a9284eaad', 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: '294f615d3eefd108719bd1c292b551cdf7c67b83', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: 'eff8af7b09d32e5c61fe764de075f67857381600', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'd1a5d5c36fd9a7a3e4a959d890b157e224e24277', title: "ID", value: this.payout.id }), h("div", { key: '9a0b3ac70bbe2290ec3aebf83ca4037fabbd41a4', class: "m-4" }, h(Button, { key: 'e50464088db095e913cc176fbc752576faf1e483', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'c1ac03ad58a631076be03f0bc152ccb71c96dd3f', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '23168d82b011053fdde169653b9d38e9afd20ca8', sectionTitle: "Details" }), h("div", { key: 'a0d48c1064dacd030dfbdb038f7f7916216120e1', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '669f79459362f38d9a8e6d5b62cf7729749fe025', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '31c91b0e512789303456bfb2eb177d4e88009ea9', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'd168b4c88d22850d35f57775fed8d2fd35ce2593', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'a17172ea263334a99136495c3b93534b6e913c92', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: 'f896659044741ac90391795322f7da5f46ea347e', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '9acf299858e138e1774375f747cca3ce07d40a62', sectionTitle: "Account" }), h("div", { key: 'bd65f987d50082c875952f426ac233c3d7d7033b', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '89420940ff25dfa0cd5f74fdcaebb2e7d332881a', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '5283b7c63a70458185fdf9280af31b15023c983a', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '14e79f73210ac1e7c8542e3b5de9085b1ee21993', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'f2dbc9f4279068e9cd5f4e6c623e8d30468ff5cc', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '8cf9051da522924f6134d9aa3eb5f49f0f91cb61', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
-            h(DetailSectionTitle, { key: '8117a4636c6d41a0137bfd58c80eb4cfaa521627', sectionTitle: 'Metadata' }),
-            h("div", { key: '91ecdff8221e907542e7d026e354c78bdd577dd2', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'a1a8d86e784eadf48af99f6576f67f37b9b7d585', metadata: this.payout.metadata }))
+        return (h(StyledHost, { key: 'd65d95e351d19934faee7ccdf4da45a36d426556' }, this.loading && h(PayoutDetailsLoading, { key: 'a1451d9d4b694ec11ecf2a91a0dda82cc64b1ea3' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '2e1264d0097a9fe9691f9492a1d761eaf8a1349b', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '4d784a772f89210667a6a922945ab835857142e6', 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: '8a68c23ee95181fe2f254248d089c51fac50adea', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '3e1ff522083f9226716f3088e40a548ae5f5213d', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '618260bfd3af2188862739d411ad27fd65c0c22e', title: "ID", value: this.payout.id }), h("div", { key: '2358eb5e66173f1d1746ba57e1e0e6ecc807c720', class: "m-4" }, h(Button, { key: '3b1faa1ea99dfc8fef63813115b4e0d74abf475d', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'c7ccf575ab9c9b16781553e1cd24b7c919149419', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '308ed84f102229263c96eb356de642b0b488b30b', sectionTitle: "Details" }), h("div", { key: '179d6727dd1855e302d1496937882aa681684f35', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'ee71826ac9132dfeee95f95a7b1627e23fbb5c22', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '905c50a423a0fc09bee87b8a21f4cb97b20e271a', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'eb61b7aae884c4b0fccc6e0d63e2b1b2988cdbe9', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '630c244cddfa9f69e3334e81e0fe899715911944', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '309e47c1fc2c229e396899e158fcb202854d3aec', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '42cf4752be0db19e4b399ecc68a17b0debe30176', sectionTitle: "Account" }), h("div", { key: 'c420e79af3aca398c2195f0f33858555cb266e04', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '48b3b67ede46c4bc6aef2dbd7fa7f3b33776b371', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '0e569e60700592d33bc6a43d30aca37911c0f201', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'e5658f5dfe522a8c7ed9d4c4bf4989202fa64165', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '403329bffcee5b762670090065c70aafb13b5a60', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '336601026906b39107b7d6ab667866c5f5141a6c', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
+            h(DetailSectionTitle, { key: 'cfa4c97844a1659db6dd5e109691b4885c9778e5', sectionTitle: 'Metadata' }),
+            h("div", { key: '22014f2d1b3ccfb415892be531ee3dcaeaa4091f', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '6ae6a7adb3dc348c5af58bd49b1545f37e325972', 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: 'b0566bb575439c658403df18ae94472f9b5f1ad4' }, h(TableComponent, { key: 'f8be406a444817869163952579b9cd4b52090d96' }, h(TableHead, { key: '033152e7e9519608465de2824b74c4348ff1f72d' }, h(TableHeadRow, { key: '8a63f9317ca024eb6c61e1871867deac4b518261' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'b629a21c23c0ae3ca56d28918a35746b5cbcc715' }, h(TableLoadingState, { key: 'b9c373cbe8e039f94c27170dd65034caeccee74b', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '500b8df48a9a429b6a01bac63c189410ccec92d0', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'bdd34fcb481d09289b708698b82c60ad5dc067c2', 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: 'a007cd03fda86b83f3d95b0321b12daf2fbf050d' }, h(TableFootRow, { key: 'eac8af33f784cf64bfdc80e9b51e849ba313ee71' }, h(TableFootCell, { key: '952d9b507169e5f56423031ae33f0177eb40022e', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '62fd97a74939bdb68ec9ba68ee893ba315e09e9e', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '1755ee8bd42b276e1cc4ed7c9cf68bb994225164' }, h(TableComponent, { key: 'e7db23b5195bde527f1436f4cca8aeceed51669f' }, h(TableHead, { key: '8cd1cf32af3fa88b20cecd4b87cf3e9276380413' }, h(TableHeadRow, { key: 'ac3e4ccff0cbe1d29c28d4d10c70ab0436383727' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: '5b528b6049499bc9ebf8a8c1c4d6ec2e667e7c66' }, h(TableLoadingState, { key: '0e0a3ba57229bbc5bf4eb0706db4513cc8b74dc8', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'edb4ca86e0275aaedb70cf5f28b32f577ada663a', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'c3a6c202754b5ae071347a66f8e8ed8da09390f2', 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: '949ae7cbd5de7bc34150ac1db0113ad8edf7b40b' }, h(TableFootRow, { key: '5e47e5489d8a7cd6a78105e0f01a42e703c03f0d' }, h(TableFootCell, { key: 'e83b0668b0c6ffdf836eaf5b2c33c9d508942c77', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '850c1f7e57a83b5c0c7ff10325bcfc798151ff16', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],