@justifi/webcomponents 5.7.1 → 5.7.3-rc-01

package/dist/collection/components/modular-checkout-parts/card-form.js

@@ -0,0 +1,123 @@
+import { h } from "@stencil/core";
+import CardFormSkeleton from "./card-form-skeleton";
+import { StyledHost } from "../../ui-components";
+import JustifiAnalytics from "../../api/Analytics";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
+export class JustifiCardForm {
+    constructor() {
+        this.iframeOrigin = IFRAME_ORIGIN;
+        this.isReady = false;
+    }
+    componentWillLoad() {
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+    }
+    componentDidRender() {
+        const elements = [
+            this.cardNumberIframeElement,
+            this.expirationMonthIframeElement,
+            this.expirationYearIframeElement,
+            this.cvvIframeElement,
+        ];
+        Promise.all(elements.map((element) => {
+            return new Promise((resolve) => {
+                element.addEventListener('iframeLoaded', () => { resolve(); });
+            });
+        })).then(() => {
+            this.isReady = true;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    async validate() {
+        const cardNumberIsValid = await this.cardNumberIframeElement.validate();
+        const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
+        const expirationYearIsValid = await this.expirationYearIframeElement.validate();
+        const cvvIsValid = await this.cvvIframeElement.validate();
+        return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
+    }
+    async tokenize({ clientId, paymentMethodMetadata, account, }) {
+        return this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
+    render() {
+        return (h(StyledHost, { key: '44aa8e7da60f3dc8408e53f1ca4bf1ec98e838be' }, h(CardFormSkeleton, { key: 'eaea67379e10386d215284de04cd140ac0af0274', isReady: this.isReady }), h("hidden-input", { key: '6bdd3a8aef52e4d2bb7e5a7855578af5e491d04f' }), h("div", { key: '8e271c01ecd6c178f44f9cd9d331d6fc6240bce4', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, h("div", { key: '568ac8e93eac648b43d047b2ba149230f7bd2e2f', class: "mb-3" }, h("iframe-input", { key: '5dde288003664ba6fb768a9e5837e4069e749ae5', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber` })), h("div", { key: '57d7153ff9f21fbbfe2fbf41d664fbbc05fd72db', class: "row" }, h("div", { key: 'a6f2dcd5a98428f2af8773c7ebf76ea3c232a2a9', class: "col-4 align-content-end" }, h("iframe-input", { key: 'ac7ef13f9c9e788a065f6fe3485f8aeb20a3f6e8', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth` })), h("div", { key: '36c7531f0f7f4a5c98eb36f1c3c395d392567041', class: "col-4 align-content-end" }, h("iframe-input", { key: '2c04a8aa66b73e1e485dd124b27ebf8d9da043d8', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear` })), h("div", { key: 'e413f4a9232c6c8f21fd9738d6b641d2ff9c547f', class: "col-4 align-content-end" }, h("iframe-input", { key: 'bf1204c99ec33e349fe07a741a4ba80d20def1f8', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV` }))))));
+    }
+    static get is() { return "justifi-card-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "iframeOrigin": {
+                "type": "string",
+                "attribute": "iframe-origin",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "IFRAME_ORIGIN"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isReady": {}
+        };
+    }
+    static get methods() {
+        return {
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "tokenize": {
+                "complexType": {
+                    "signature": "({ clientId, paymentMethodMetadata, account, }: { clientId: string; paymentMethodMetadata: any; account?: string; }) => Promise<any>",
+                    "parameters": [{
+                            "name": "__0",
+                            "type": "{ clientId: string; paymentMethodMetadata: any; account?: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/modular-checkout-parts/postal-code-form.js

@@ -0,0 +1,114 @@
+import { h } from "@stencil/core";
+import { StyledHost } from "../../ui-components";
+import { numberOnlyHandler } from "../../ui-components/form/utils";
+import { FormController } from "../../ui-components/form/form";
+import { billingFormSchema } from "./billing-form-schema";
+export class PostalCodeForm {
+    constructor() {
+        this.errors = {};
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+    }
+    componentWillLoad() {
+        this.formController = new FormController(billingFormSchema(true));
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async fill(fields) {
+        this.formController.setInitialValues(fields);
+    }
+    async validate() {
+        let isValid = await this.formController.validate();
+        return { isValid: isValid };
+    }
+    render() {
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        return (h(StyledHost, { key: 'e5cdb9b21be1e5f4ee6fd21a2d919b2d9271b163' }, h("form", { key: '29c0a3edaad9877d50ecc9e4424ca2f5e667dc30' }, h("form-control-text", { key: '00e8688c8a8e9b91df5089e2fb97c8b71673a3fd', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))));
+    }
+    static get is() { return "justifi-postal-code-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get states() {
+        return {
+            "formController": {},
+            "billingInfo": {},
+            "errors": {}
+        };
+    }
+    static get methods() {
+        return {
+            "getValues": {
+                "complexType": {
+                    "signature": "() => Promise<BillingFormFields>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "./billing-form-schema",
+                            "id": "src/components/modular-checkout-parts/billing-form-schema.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<BillingFormFields>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "fill": {
+                "complexType": {
+                    "signature": "(fields: BillingFormFields) => Promise<void>",
+                    "parameters": [{
+                            "name": "fields",
+                            "type": "BillingFormFields",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "./billing-form-schema",
+                            "id": "src/components/modular-checkout-parts/billing-form-schema.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<{ isValid: boolean; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ isValid: boolean; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/modular-checkout-parts/saved-payment-methods.js

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+import { StyledHost } from "../../ui-components";
+import checkoutStore from "../../store/checkout.store";
+import { radioListItem } from "../../styles/parts";
+import { CardBrandLabels } from "../checkout/payment-method-option-utils";
+export class SavedPaymentMethods {
+    constructor() {
+        this.onPaymentMethodOptionClick = (paymentMethodId) => (e) => {
+            e.preventDefault();
+            checkoutStore.selectedPaymentMethod = paymentMethodId;
+        };
+    }
+    componentWillLoad() {
+        if (!checkoutStore.paymentMethods.length) {
+            console.warn('No saved payment methods available.');
+        }
+    }
+    render() {
+        return (h(StyledHost, { key: '7bebb3f8ff2a2abe400e1d099154a1729913140c' }, h("div", { key: '3a5798c5ceba63160dceecb0dc65f8a211bb5110', class: "saved-payment-methods" }, checkoutStore.paymentMethods.length ? checkoutStore.paymentMethods.map((paymentMethod) => (h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id) }, h("form-control-radio", { name: "paymentMethodType", value: paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id, checked: checkoutStore.selectedPaymentMethod === (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id), label: `${CardBrandLabels[paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.brand] || ''} *${paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.acct_last_four}` })))) : null)));
+    }
+    static get is() { return "justifi-saved-payment-methods"; }
+    static get encapsulation() { return "shadow"; }
+}

package/dist/collection/components/modular-checkout-parts/sezzle-payment-method.js

@@ -0,0 +1,127 @@
+import { h } from "@stencil/core";
+import { formatCurrency } from "../../utils/utils";
+import { radioListItem } from "../../styles/parts";
+import checkoutStore from "../../store/checkout.store";
+import { StyledHost } from "../../ui-components";
+const sezzleLogo = (h("img", { class: "sezzle-smart-button-logo-img", src: "https://media.sezzle.com/branding/2.0/Sezzle_Logo_FullColor.svg", alt: "Sezzle", style: {
+        display: 'inline',
+        width: '80px',
+        marginLeft: '5px',
+        marginTop: '-5px',
+    } }));
+export class SezzlePaymentMethod {
+    constructor() {
+        this.paymentMethodOptionId = 'sezzle';
+        this.onPaymentMethodOptionClick = (e) => {
+            e.preventDefault();
+            checkoutStore.selectedPaymentMethod = this.paymentMethodOptionId;
+            this.paymentMethodOptionSelected.emit(this.paymentMethodOptionId);
+        };
+        this.initializeSezzleCheckout = () => {
+            let resolveSezzlePromise;
+            this.sezzlePromise = new Promise((resolve) => { resolveSezzlePromise = resolve; });
+            const amount = Number(checkoutStore.paymentAmount);
+            const Checkout = window.Checkout;
+            const checkout = new Checkout({
+                mode: 'popup',
+                publicKey: checkoutStore.bnplProviderClientId,
+                apiMode: checkoutStore.bnplProviderMode,
+                apiVersion: checkoutStore.bnplProviderApiVersion,
+            });
+            checkout.sezzleButtonElement = this.sezzleButtonRef;
+            checkout.init({
+                onClick: function (event) {
+                    event.preventDefault();
+                    checkout.startCheckout({
+                        checkout_url: checkoutStore.bnplProviderCheckoutUrl,
+                    });
+                },
+                onComplete: (event) => resolveSezzlePromise({ bnpl: event.data }),
+                onCancel: (event) => resolveSezzlePromise({ bnpl: event.data }),
+                onFailure: (event) => resolveSezzlePromise({ bnpl: event.data }),
+            });
+            this.sezzleCheckout = checkout;
+            this.installmentPlan = this.sezzleCheckout.getInstallmentPlan(amount);
+        };
+    }
+    componentDidRender() {
+        if (!this.scriptRef)
+            return;
+        this.scriptRef.onload = () => {
+            this.sezzleButtonRef = document.createElement('button');
+            this.initializeSezzleCheckout();
+        };
+    }
+    async resolvePaymentMethod(insuranceValidation) {
+        if (!insuranceValidation.isValid) {
+            return { validationError: true };
+        }
+        this.sezzleButtonRef.click();
+        return this.sezzlePromise;
+    }
+    render() {
+        var _a, _b;
+        if (!checkoutStore.bnplEnabled) {
+            console.warn('justifi-sezzle-payment-method: BNPL is not enabled for this account.');
+            return null;
+        }
+        return (h(StyledHost, { class: "payment-method" }, h("script", { src: "https://checkout-sdk.sezzle.com/checkout.min.js", async: true, ref: (el) => (this.scriptRef = el) }), h("div", { class: "radio-list-item p-3", part: radioListItem, onClick: this.onPaymentMethodOptionClick }, h("form-control-radio", { name: "paymentMethodType", value: this.paymentMethodOptionId, checked: checkoutStore.selectedPaymentMethod === this.paymentMethodOptionId, label: h("div", null, h("div", null, "Buy now, pay later with ", sezzleLogo), this.installmentPlan && (h("small", null, h("span", null, (_a = this.installmentPlan) === null || _a === void 0 ? void 0 : _a.installments.length), "\u00A0", h("span", null, this.installmentPlan.schedule, " payments of"), "\u00A0", h("span", { class: "fw-bold" }, formatCurrency((_b = this.installmentPlan) === null || _b === void 0 ? void 0 : _b.installments[0].amountInCents))))) }))));
+    }
+    static get is() { return "justifi-sezzle-payment-method"; }
+    static get encapsulation() { return "shadow"; }
+    static get states() {
+        return {
+            "installmentPlan": {},
+            "sezzleCheckout": {},
+            "sezzlePromise": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "paymentMethodOptionSelected",
+                "name": "paymentMethodOptionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "resolvePaymentMethod": {
+                "complexType": {
+                    "signature": "(insuranceValidation: any) => Promise<PaymentMethodPayload>",
+                    "parameters": [{
+                            "name": "insuranceValidation",
+                            "type": "any",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "PaymentMethodPayload": {
+                            "location": "import",
+                            "path": "../checkout/payment-method-payload",
+                            "id": "src/components/checkout/payment-method-payload.ts::PaymentMethodPayload"
+                        }
+                    },
+                    "return": "Promise<PaymentMethodPayload>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/modular-checkout-parts/summary.js

@@ -0,0 +1,12 @@
+import { h } from "@stencil/core";
+import { text } from "../../styles/parts";
+import { formatCurrency } from "../../utils/utils";
+import checkoutStore from "../../store/checkout.store";
+import { StyledHost } from "../../ui-components";
+export class Summary {
+    render() {
+        return (h(StyledHost, { key: '9a2eea1693287ad73dfedd3ddc24e949e9d75148' }, h("section", { key: '1943be6cef0c4a1c830ddfc14d893c3906482534' }, h("div", { key: 'cf3f41d3dd3c9829d93d7e56e3d2dfabbd99ccef' }, h("div", { key: 'b5bc944a5310252dc0720e3e7d709f1a57f898c8', part: text }, checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.paymentDescription), h("div", { key: 'dbe53880d7c3ff8d4513a570e1b024f1e2f43028' }, h("span", { key: 'd8986a9265463d8f9d7f62598cc4ec3203081c09', part: text }, "Total"), "\u00A0", h("span", { key: '32cbc6e259fdee2c71ad72fcf59ab157704c4758', part: text }, formatCurrency(+(checkoutStore === null || checkoutStore === void 0 ? void 0 : checkoutStore.totalAmount))))))));
+    }
+    static get is() { return "justifi-checkout-summary"; }
+    static get encapsulation() { return "shadow"; }
+}

package/dist/collection/components/order-terminals/order-terminals.js

@@ -126,7 +126,7 @@ export class OrderTerminals {
         return (h("div", { class: "mt-3" }, h("div", { class: "text-end" }, "Order limit: ", this.orderLimit), h("div", { class: "d-flex justify-content-end mt-3" }, h("button", { class: "btn btn-primary submit-btn", onClick: this.submitOrder.bind(this), disabled: this.order.totalQuantity === 0 || this.submitting, part: buttonPrimary }, this.submitting ? 'Submitting...' : this.submitButtonText))));
     }
     render() {
-        return (h(StyledHost, { key: '95d4b374036e4713216ce61e87571a607b8c3f0a' }, h("div", { key: '3e57b055db0d1bf26b9eb38a78fa57493afd3af3', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
+        return (h(StyledHost, { key: '80d01331179298720ebc453702a6db644ea51ff4' }, h("div", { key: '895f5315bf90607eae80c6cd471d8adcab542d14', part: text }, this.renderLoading(), this.renderBusinessDetails(), this.renderTerminals(), this.renderOrderSection())));
     }
     static get is() { return "justifi-order-terminals"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/order-terminals/terminal-quantity-selector/terminal-quantity-selector.js

@@ -18,7 +18,7 @@ export class TerminalQuantitySelector {
         };
     }
     render() {
-        return (h("div", { key: '5bbf669ab479523290b2d8a9f5b6ec2000ff0f96', class: "rounded shadow-sm card p-2", part: card }, h("div", { key: '47ead96654c97aeae6b24058a4f7759918d3d0ad', class: "d-flex gap-3" }, h("div", { key: '3763eda68e7849c87f0e67b905e09267c10481c8', class: "d-flex align-items-center" }, h("img", { key: 'ef0a61d5c1d27c600fd93813b594ec2ec2fadec3', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '5a632f69e2045fbfcd35932af3c5fd027dcca66f', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: 'be00d142f07945a15e882d2da4c505ffbf67fe88', class: "row" }, h("div", { key: '1c434628ae872d22efa7d2adb611b04868c85eb1', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: '21f571a1b0e5ba7d528727f6476e134b9657e124', helpText: this.description })), h("div", { key: 'f4077bfa6beb4f0070bdbf4bd28021f88bcaf5b1', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: '7dc6853fb7641b99a9a9ee82dcb3db8fce1d6c01', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: 'faab14e72773f12f69ea69e855bafb27ef3328b8', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: '390e6b4b049fa64e2b7354a3676621844291feb0', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
+        return (h("div", { key: 'acd6ffec348aed5fa500a6d7e49c886a3fe8a59f', class: "rounded shadow-sm card p-2", part: card }, h("div", { key: '89933c07745fbeb3603f8bdf07d99553a7de1e6c', class: "d-flex gap-3" }, h("div", { key: 'c1b6517d5ebd32e1a5bf1c5537e1d19b00510286', class: "d-flex align-items-center" }, h("img", { key: '9458553216d0ed9668d08bf4ea2105dc9e53c938', src: this.imageUrl, alt: this.modelName, height: 75, width: 75, part: image })), h("div", { key: '14fd39b7055f78d42b14a6cb6dc35d42a3c7b33e', class: "d-flex flex-column flex-grow-1 gap-3 p-4 justify-content-center" }, h("div", { key: 'eeb5d39bd39919aba43e86ceda4268f4e3473e7a', class: "row" }, h("div", { key: 'e31e24896792a532b0a218bc69312266638a6d15', class: "col-6 d-flex gap-2" }, this.modelName, h("form-control-tooltip", { key: 'c8561458f795ed7e289a4a4a8963a3791173a19a', helpText: this.description })), h("div", { key: 'ecafe47bcc37130a54880280c95db10709cb68a8', class: "col-6 d-flex justify-content-end align-items-center" }, h("button", { key: 'ef2ffb65f7d33e2bd1b940b1af19ed66621222ed', class: "p-0 minus btn", onClick: this.removeUnit, part: buttonLink }, "-"), h("div", { key: '8e18e05026e106d2e180e97b7011697f7e36288a', class: "w-25 text-center" }, this.selectedQuantity), h("button", { key: 'e361f1bb9760a32a779f62974b89464cf870728a', class: "p-0 plus btn", onClick: this.addUnit, part: buttonLink }, "+")))))));
     }
     static get is() { return "terminal-quantity-selector"; }
     static get properties() {

package/dist/collection/components/payment-details/payment-details-core.js

@@ -38,16 +38,16 @@ export class PaymentDetailsCore {
         });
     }
     render() {
-        return (h(StyledHost, { key: 'db2d2ec374cf0743db6bfe43e0b8f77572e9cdfd' }, this.loading && h(PaymentDetailsLoading, { key: 'c5b7481c55723d7ab8eb9b8001efadfe33c82532' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: 'cbbd4166213c49a85c70fab920024f876394a24b', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '645552490a3d5115af19d4b3ff3d5dc80b9d3038', 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: '968b2420a648b0c12753dbae1ea966ba0ecd4b5e', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '056a4d72223eba4225ec6fa3f52c028be21d3fbe', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '8a010c36e237479a318dd6d03026a9b36fc78eab', title: "ID", value: this.payment.id })), h("div", { key: 'fbbb9dd12d129fd589228f23eef25ad2d048e5ba', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '51a4d8bdc3e66c17dabb77cbdcf06cd3cfdbe7e8', sectionTitle: "Details" }), h("div", { key: 'ce03ec8c368f24487ca5cf267dcc0237b4637595', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '35b94e984c638b461a26156acb08cf1647a065e4', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '5398feb78b40735d773889c57517de8784f043f0', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'e2667dba443e74b4139137d7194538b4799c59d4', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '3cc3a74d90a0d10fe5f79c6e3fa942147bdf37f0', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: 'e7f942356e5810ed1f6836002e03fab078e7da24', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '4ed5bb3102ab533914f8841de5f3bb38e059cca0', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: 'ffe0e3990db78c2e57133865f8ab5314698a6126', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'a0defbb3e570929e4667c7d96beb23a2b21090f2', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'a196e9c84f30e0cbab086c02caa15188adae0fe5', title: "Description", value: this.payment.description }), h(DetailItem, { key: '3f0215fbb1faf2defb2a614d1bb463f43f4edc97', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: '3627159fa135d895c1591c1146daf6b1b3fcff3e', sectionTitle: "Payment Method" }),
-            h("div", { key: '00340647cfb3421627b587bcfd3e81d6cf9cb271', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'b89fd68b547f48c42636b7b0904f9c518a135a84', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '2998d39cc3d133398f2e482cd47f5d5eb2fd9bc6', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '23259226da35ecd71d07685484145d547eebcfa5', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '090a22f97bfb43ffae0c7c475ee6f9c00d92193b', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '72c41739c55d99c9efbc0d5c77fcfa0049d5c21a', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: '1d796db87530f0bf361f958ebf32d7b07e717738' }, this.loading && h(PaymentDetailsLoading, { key: '984ce8660178c8ab6700f8978ffe98e8e7fb94cf' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: 'aba73992ecd7091a7ba02b12068787581e0a17ae', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '6fbf25826f9c8fa2cb1787c823950fcc6f43af65', 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: '1b3967629cd23119be1e50554f508e067184825d', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: '6dc024bd7211b140bf324810f695251cbdfde2a2', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '3fc21466a82163cbc4ba8d1dd5fb1807fba9bb73', title: "ID", value: this.payment.id })), h("div", { key: '8aea85d5c2542e4d519c7964d49c32aaf1ab0910', slot: 'detail-sections' }, h(DetailSectionTitle, { key: 'aed60a360a9d83210d632597f0bb58b459ef16d9', sectionTitle: "Details" }), h("div", { key: '11ad30fd836ee9f771c863d4f2c2c886822fdc99', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '9a622ed1f10b394a54ba839f14cc3f2cb38b6655', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: 'a2d24f3760ad9984439de3f7c170bec82a76add1', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'd16b76c2389d4a35e84f8d52994598e7a20d824a', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: '13836d9cc01a29f07ec3cbf1633f553721bbcec4', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '743060dde2c10aa76ef24b37d8c395ee33e40760', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '611fee1067e9905b3635959a077316b3a5442223', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: 'fda9fc662b825647235ebc31754a2912827cd819', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'c6652062c85f350e80a278e54acb944603c40363', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: '300c0ab999530c9f56e0177649ff5e4d365a3588', title: "Description", value: this.payment.description }), h(DetailItem, { key: 'ada3e801c62d3a4e7e3dcd2fddd49acce8a43544', title: "Expedited", value: this.payment.expedited ? 'Yes' : 'No' })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: '1dfaeccd9b79e554dd7d9c77c2ac590fd0b3d5ef', sectionTitle: "Payment Method" }),
+            h("div", { key: 'c3a7301df552014a43980a831750cca16f9eac5c', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '206c8b54e2f6006ee8cafa2b3e96af7c03b0daea', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: 'ee34d87b3321f878dcd809aa580ece6cffe34a70', title: "Payment Type", value: "Card" }), h(DetailItem, { key: 'cafe35022509baa2470ecf1316bd9cd895985c18', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '4e69bec4de04c2a2a67d786be1a295645b333aa5', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: 'e194daa5027f44cfef972c790a7bde7f136556e6', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: '55bfec78982d1a44c5ea863e4c5bdc64cd61f241', sectionTitle: "Payment Method" }),
-            h("div", { key: 'da3be8d900f1db7b0337a27e91c90d424b4970d5', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'bfcd4367c607055397d8d4417dc671d5f262acd2', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'a5ba2164eadb8bd424889cd6ed02db4679d75f91', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '96a3c52d38c8fe6dabaa032e41f87946a1fb5333', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '3dfa62ba43bd18533104b8e608ce4303a75b6451', title: "Account Owner", value: this.payment.payment_method.payersName }))
+            h(DetailSectionTitle, { key: '03e24cfe64d0d96793e4795f2aee3753cd2fb646', sectionTitle: "Payment Method" }),
+            h("div", { key: 'eb2e9e0b1a87424ae12f034b84c5798d11e32576', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'bcaa8001cb8de0c140fd67fa59d4587dd4e15b73', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'c0918724c811a22d8fb74dc59e4d047e339d5c3f', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '3edee5ba73da3c5e2f1a8d676e6560a86476b4f7', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: 'd77f5fde0c2cb01121a6e04547334f0aa4d0e586', title: "Account Owner", value: this.payment.payment_method.payersName }))
         ], this.payment.metadata && [
-            h(DetailSectionTitle, { key: '6d180793de4f1d8e13c0af9e30d44faf121733cd', sectionTitle: 'Metadata' }),
-            h("div", { key: '76b6e75ace2f243ad86dc5f66aed0aa505a35181', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'a3ee69d8d8699a15980f170a087925d3458135a4', metadata: this.payment.metadata }))
+            h(DetailSectionTitle, { key: 'dc48f8084e20957839cad339ce004c81133a16db', sectionTitle: 'Metadata' }),
+            h("div", { key: 'cf724626bd10bb1bad97ed855fc0f2bdb3b9e043', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'dfe7f52a5ed42c2f737e411fb65459744fce1d7f', metadata: this.payment.metadata }))
         ])))));
     }
     static get is() { return "payment-details-core"; }

package/dist/collection/components/payment-transactions-list/payment-transactions-list.js

@@ -91,7 +91,7 @@ export class PaymentTransactionsList {
         return !this.showEmptyState && !this.showErrorState && !this.isLoading;
     }
     render() {
-        return (h(StyledHost, { key: '5afad0e2e8dc4f37660b09c434fa1e69014194f6' }, h(TableWrapper, { key: '90b657d1a31077ccfee1c494e5bde526572d86b1' }, h(TableComponent, { key: 'c25fd7f2cb00dff6e7d1e5102660c28c08735439' }, h(TableHead, { key: 'a6a9bfd9dff7aa5c82e2dbe5c3c5674b4e6a5c04' }, h(TableHeadRow, { key: 'a7e136e48933ae4f7dabc3cb70bda5f2016b400f' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '921169d43283f1b13921f3972e4ff912a92a27eb' }, h(TableLoadingState, { key: '69e6d2c8df07e0acb657ab0f7997b6576be86c91', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '6a8a44d407bc4cb75e003ce68b174eed3aee885f', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '599552617b6e9f4dc6451a4fbbb5fe2c402849e4', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.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: 'c2cadba24db21209557443e598ae2fbb1f4f1ffa' }, h(TableFootRow, { key: 'ffa9e9f6bf3dd7bb6bb5b8626756edf7ee249074' }, h(TableFootCell, { key: '7d6a900f2aac9483004c4eda42b3592db4495cca', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '028b35bc60ff879529a10ef43de4f45ba2aeb584', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: '2e6911991eb1fc44421771f3eaeaab5b56a428a7' }, h(TableWrapper, { key: '316b7fbfd053e46cf13867e339af620348a9eab6' }, h(TableComponent, { key: 'fb9e5747d296827057127ba02b129813acdf8697' }, h(TableHead, { key: 'e18cb6967b4fc7a87e6446331b749a661152ae15' }, h(TableHeadRow, { key: 'e6826933dda843935998e30de46c282822f52015' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '25ec99be29c6cfd4c73268ba9bdd3bd27dd111d3' }, h(TableLoadingState, { key: 'd4543307e31e2c697958118c7cce3175a04a23da', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '729b803595deed86cb03fee9bce764a7652f167f', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: 'a774dd4abc6d1d0f36e9bf5d5a9c851cca632181', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.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: 'f986ae746e06bf1ec934a6adc5149a9ced344c1e' }, h(TableFootRow, { key: '622645b9ca816156183d08f71806bca804ddbc8b' }, h(TableFootCell, { key: '672fa0fd592029908aaa88dddbfb5db90d14f7e6', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '60538e822fbf8279ec428c82e2fd9cf53a9d1b44', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "justifi-payment-transactions-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/payments-list/payments-list-core.js

@@ -83,7 +83,7 @@ export class PaymentsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: 'ebc89e8b55258a1442edad51d5238b8734aa345e' }, h(TableComponent, { key: 'b90635548604f5d486a38421e5228c61ec47c033' }, h(TableHead, { key: '3106e6ac62fc9df004a8dc1c4fa6b07763ec9d7a' }, h(TableHeadRow, { key: '68c7767762899d3ee229835d93eb9221c8b097e9' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: '5ffee99d7437590c48f766d5bde24385ea31fdc5' }, h(TableLoadingState, { key: '4170ce391f84c65286f358d4e1c03f67c2f9ffcc', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '8f47428d403e763179e071756582065351fa7c63', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '5857f210589dd16232338ad39897ecd4581dc7db', 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: '1cb054a34b99150f33cf1a008a64451e85af4700' }, h(TableFootRow, { key: 'd203e8a928713108cbfbde297ed18bf60cd5cb8e' }, h(TableFootCell, { key: '710c8b5915f08f14892a04c16ac069039804b4f9', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'f9f40a23e8bcbce6adf93f66e2a97f15f91f4f15', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'f7d8eb83c5c0bfe1f426a784a8d4a14689958c8a' }, h(TableComponent, { key: 'b4c6aa6781f64a95e75dcb6e163eae62280d4777' }, h(TableHead, { key: '35c522e3cb956adabdbc0d5f49d4ecb564b28922' }, h(TableHeadRow, { key: '1d08847173e7a17eef90aff34dd4eed12f43a55f' }, this.paymentsTable.columnData.map((column) => column))), h(TableBody, { key: 'd18ec5a41975ed90e2517f1ab7b1d35bd13f2021' }, h(TableLoadingState, { key: '3ccdaaa336b40207f240d0c35bd066991016ea52', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '373fc79d3328a93ce02721f670d84d0b77afa322', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'd6141695f295827c1f22f823e5a59de9d4147956', 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: 'bada9a9d7e5a6c630aa2a272d324b3506c84be70' }, h(TableFootRow, { key: '4b2147edb866f00fd895c9be647ff826e8b964e5' }, h(TableFootCell, { key: 'ea9856256d190727350137530933bd51ba4935d0', colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '27932b928dd6245e14404b51a69b7073205d4139', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "payments-list-core"; }
     static get properties() {

package/dist/collection/components/payments-list/payments-list-filters.js

@@ -43,8 +43,8 @@ export class PaymentsListFilters {
     }
     render() {
         const filterMenuParams = Object.assign({}, filterParams);
-        return (h(StyledHost, { key: '41c3ce22404b0e8e536d8c230886eadc34b77208' }, h("table-filters-menu", { key: '864a91207169043f08a47c90c8f867d0e32031e2', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: 'd2a98ef4ab0094f708de21c2c3e02ec149b5e72f', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '00b9b884348d47e7dc1670064c1c0486eefc0a21', class: "p-2" }, h("form-control-text", { key: '405ee21a3780942784738a0cc0a3b423a03c2b5e', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: '5401d6d05995af1fa7ab801987d79711c16aecc1', class: "p-2" }, h("form-control-text", { key: 'e1518fddbd3e62af0ddce873a191376b2504c9e0', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: '131c39879c3823c3d380d4939e6b93a2771bc86a', class: "p-2" }, h("form-control-select", { key: '856053d6ce5381956a18c6a21df169898fa71616', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status, disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: '76ad87197605e45ae06fefc547755df29741fa18', class: "p-2" }, h("form-control-date", { key: '7cdd9b684a87e2da99ecfe963349433bf7ac1d45', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
-                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterPaymentsListFilterParam })), h("div", { key: 'ae78b441f6dbbbdca902fb4f83f7531e80322ff2', class: "p-2" }, h("form-control-date", { key: '34d321e3cd47ccd95ea30d7a54cfb36e34af64db', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
+        return (h(StyledHost, { key: '391445459edaf4d91dae9473cc48c5ed547e6ef4' }, h("table-filters-menu", { key: 'd07285a19096df128f64c820d9fadb1178c7bfa2', params: filterMenuParams, clearParams: clearParams, part: paymentsListFilterMenu }, h("div", { key: 'a01f3600c114340ca0252799889cfb0abe93c8c6', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '65c2067c8f974cda96ecd012503cd50f21af1dbe', class: "p-2" }, h("form-control-text", { key: 'a6cd04a16bd34a32a760f42be8d604892fd0eb91', name: "payment_id", label: "Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.paymentId || filterParams.payment_id, disabled: !!this.paymentId, part: paymentIdPaymentsListFilterParam })), h("div", { key: '646c31fb7cdbe3ac411ea02f24f81d60b2a32c23', class: "p-2" }, h("form-control-text", { key: '693f22ca4b96f33e5eeb475ad86e78992df95fb8', name: "terminal_id", label: "Terminal ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.terminalId || filterParams.terminal_id, disabled: !!this.terminalId, part: terminalIdPaymentsListFilterParam })), h("div", { key: 'a5e96c84a9864c74bda22d398f388afd6b9f77df', class: "p-2" }, h("form-control-select", { key: '6c5c6a3a2d0763af151c46b8f8ad27eed63356f3', name: "payment_status", label: "Status", options: this.paymentStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentStatus || filterParams.payment_status, disabled: !!this.paymentStatus, part: paymentStatusPaymentsListFilterParam })), h("div", { key: '2716ec9b9fa8944d0a6f6a47ee460c5a62b51ff3', class: "p-2" }, h("form-control-date", { key: '7465c4b321beb78151408ec4cfad2074e75a1eaa', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
+                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: createdAfterPaymentsListFilterParam })), h("div", { key: '396bd5ec578e99342321887773d2c5b58215fec6', class: "p-2" }, h("form-control-date", { key: 'd5e3fbae8412ad820c50be18c17db52852f5d3a9', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
                 convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: createdBeforePaymentsListFilterParam }))))));
     }
     static get is() { return "justifi-payments-list-filters"; }

package/dist/collection/components/payments-list/payments-list.js

@@ -46,7 +46,7 @@ export class PaymentsList {
         }
     }
     render() {
-        return (h(StyledHost, { key: '26ccbd4f232a44cc9a682d9496fc0eb714c89864' }, h("payments-list-core", { key: 'c2b9653272eb8e3ebcd21309a0c475514ec1aa35', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
+        return (h(StyledHost, { key: '44d6afd6b784b099b5b222b525bdd474aec5aa19' }, h("payments-list-core", { key: 'b17f29330af9a87bbe81be7ba1db45fa9398f0cd', getPayments: this.getPayments, "onError-event": this.handleErrorEvent, columns: this.columns })));
     }
     static get is() { return "justifi-payments-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/payout-details/payout-details-core.js

@@ -52,9 +52,9 @@ export class PayoutDetailsCore {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '1d9842d26d6e1a89b3fc8a1ed6ed395f55b913ee' }, this.loading && h(PayoutDetailsLoading, { key: '95917b7cba094233316f39ed610dfda5360a47e5' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'c8f1cc9c3cc9b8e343557d38b88b31035d65c00f', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '0397f400c1576f49e664a1e5d8d5d1318935b281', 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: '3a3a0d511eaf43d54012f7c07688825d141f170a', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '9c33ac6ed41a0d1d91a83af12dee4c7bf401bc60', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'f60f96ff20c47f1ec0ad7f2a6f1f81a19b4a03f5', title: "ID", value: this.payout.id }), h("div", { key: '522bc205154fc2904f1c3735e9f859cfd234dff4', class: "m-4" }, h(Button, { key: 'e691e47946499a7359018fe4c774e0e23f8cb4c4', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '7f7c975c5672aaaebcda5870870cd4a52bae40b9', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '03728f098028f6304c2e608bf38e6b79809bd5aa', sectionTitle: "Details" }), h("div", { key: 'ad8416b1a6a90052f4988d9577b6c8d6a881e0a7', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '0ecb52461ee59aad0914547ffc3aff948bc766a6', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'bc003db9efc8ea329f4eb5e9644e013dc9578b27', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'e8ce2d2c42b66efd8ff0f87a8d9b58bd1565a019', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '47f05a33981b878ebfd4a88cbd32b71fd6bf3683', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '013126090417ea6244fd01eb0c80aeec72c05bfe', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '252b01172864c2d97b358a0fde5b0532e7298278', sectionTitle: "Account" }), h("div", { key: '4c1f0b28024141ba16803349f60395406dd31f3f', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '6c4f814276825b92c05226d1dc6522a920ab3e2a', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'c3824079766df1788264cb2ee962c5229045212c', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '158c9456436cc58622d1337c11f7443497c7ae38', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '7ce5376d2c1632cbd0bd910e6290ec3caf289b73', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'a1f892fe9a638e5b5a4be23e853070355b6cf3bb', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
-            h(DetailSectionTitle, { key: '61d325fd74f125295c61266528e1d62e04bb6e2e', sectionTitle: 'Metadata' }),
-            h("div", { key: 'e574d0558fec57c0f3342c80846eb1469a9cfeb7', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'ca0cc50f11489df465d29e8da5a51495433931d3', metadata: this.payout.metadata }))
+        return (h(StyledHost, { key: 'f6b9b84a740d3e5196eca16df2f34a1b225edbc8' }, this.loading && h(PayoutDetailsLoading, { key: '3d24389cb52696810d93b0047f02dd44ee8a1386' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: '159849ab2d24fd2c08812dffc2323194b9cb5bbc', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: 'e42544c3d30edd29b79028d3e47e7e1fc25e2a8c', 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: '665e463415c851fd5198cf1ce6cbbd3e777a60ee', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '434c279f54780b4ef3a59c4a4ab5e84a0fbc536a', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: '76f7fcc47a5014a4f20dc8686b45a72eb0888228', title: "ID", value: this.payout.id }), h("div", { key: 'da0272c9aa553ec71d6e65f3865f6ce643f79092', class: "m-4" }, h(Button, { key: '9037551eba246803a623654a88f7f8cfbe210de3', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: 'b7b6f40493db4db7e1defe66f4f510c32e0fab9e', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '460e4a6bafc65e6c83dc955b99f75ed589f9ba42', sectionTitle: "Details" }), h("div", { key: 'cdb8280c872e55410f24b6a90ba17f64ae0414d4', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'f401e006c82aa38c2b390668b3905bb10bf92d88', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: '95fa773958f9ad5950432cba9f0f8821b87183c7', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: '70930d62905c51939b33e6e5341a66eff7f1f80d', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: 'f7203ba0a060df09a86fe47bb7354ba4440de247', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '9937a4bb3cf00943ff719e2851e06066960cd518', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '60988e407834a87285a8203e53053ebec0d109ae', sectionTitle: "Account" }), h("div", { key: 'd30c4e5ee64658b9ecefe9720c1a8266d1af7314', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'a60f91b7dc0b6edf4ccad3437358f70ef8a97b2e', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: '81da5682023ce4ad02b30688859262931b6d319c', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '21ced58dd4f97df5b9839f49cce50162405416fe', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '73191d6ffabdf08536f4699c3f2ba4fa867a3992', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: 'd9ea68ef61a0cb63b1056f753a957927cf3204f7', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), this.payout.metadata && [
+            h(DetailSectionTitle, { key: '1eaca03125f7e50c62c7f731a7442c088858a317', sectionTitle: 'Metadata' }),
+            h("div", { key: '1368c90f240c2ea2e6711603d8599025dce2dd82', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '52ec68588672ffa71ff98139e9d7ae193fbd55bd', metadata: this.payout.metadata }))
         ])))));
     }
     static get is() { return "payout-details-core"; }

package/dist/collection/components/payout-transactions-list/payout-transactions-list.js

@@ -95,7 +95,7 @@ export class PayoutTransactionsList {
         return Object.assign({ payout_id: this.payoutId, limit: '15' }, this.pagingParams);
     }
     render() {
-        return (h(StyledHost, { key: 'd37f96bf4e1d40607d3190791f513df5c1ce02d1' }, h(TableWrapper, { key: 'a6d2b2c342b6286630acb804b93c846ac42eff9b' }, h(TableComponent, { key: 'abcb7a3bbca27973bafdf0a0a1d9316d9e668aa9' }, h(TableHead, { key: 'e79c0ee71e45ca1379e354f939368cacbf1bd74e' }, h(TableHeadRow, { key: 'c64962612a826a5e53c921f43170f1d1ba16399a' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '7b33c299ac42c4e668cb4c967ecc5324ec56ede3' }, h(TableLoadingState, { key: '096000771b0ce2fe37db3329315bd780af9977a1', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '48ff70675d33875b8fdcf7c7ddf9ceed413ca2e8', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '4ffffbd73a18ef281209adbe870383f744d51da5', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.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: '8ba623495a597e10bc8708b9984c9da92e3750a4' }, h(TableFootRow, { key: '01f6405cef206cbaf487013370ccd7c312eca3b5' }, h(TableFootCell, { key: '0b94346d3ed5f431393e2df93f0baa81b8804d2b', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: 'c7a24d435a90c4f8db5c0f71b1a120b11cd01b7b', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h(StyledHost, { key: '6c624e5edba69e17a4cab229b90beb9d2ecda69d' }, h(TableWrapper, { key: '449f93393a5e2b1aa2dd0f4f136e264fde27a9a4' }, h(TableComponent, { key: 'de857828525be5df2e383859ac51e8b0719422fd' }, h(TableHead, { key: 'c3f2ae5ff5ae6f78a587bee899d68b3e7934cf41' }, h(TableHeadRow, { key: '57ddf8fcaafa22cf3e6137a3de82550748ac9288' }, this.transactionsTable.columnData.map((column) => column))), h(TableBody, { key: '9f634545f5afd44dab4b2a16ec630efeeee18f52' }, h(TableLoadingState, { key: '12ffb167f61de13a91c05f6c93304ff1b688d734', columnSpan: this.transactionsTable.columnKeys.length, isLoading: this.isLoading }), h(TableEmptyState, { key: '5453befdfcd1764163cc9c1a9c51f5f35e7c2c62', isEmpty: this.showEmptyState, columnSpan: this.transactionsTable.columnKeys.length }), h(TableErrorState, { key: '19f22366e49c1022f0bf96839bac88c76892d62d', columnSpan: this.transactionsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.transactionsTable.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: 'e86e144a90d9010e866bd48d96d24c613ebeb8ef' }, h(TableFootRow, { key: '6e4bee39a0c426332331128b27560218adc888e4' }, h(TableFootCell, { key: '9becbcedb44ad9f9d1ed7ef5725af087178b6829', colSpan: this.transactionsTable.columnData.length }, h("pagination-menu", { key: '17582aa7347e31457c8f29af49ccc4dcc60d3d04', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get is() { return "justifi-payout-transactions-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/payouts-list/payouts-list-core.js

@@ -135,7 +135,7 @@ export class PayoutsListCore {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: 'ca41a7df9de30363526239ec286054e16a46293d' }, h(TableComponent, { key: '15f8f414b2da0adda480da114541ed7533d79ca3' }, h(TableHead, { key: '038b27097d57734f80502949628535ab1f8bfded' }, h(TableHeadRow, { key: '9f15c37a04d1fa6f5ec49c60bfbee3ae3ddbdfca' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: 'c05f33fc7046606087da1b0693650aa571f8e61f' }, h(TableLoadingState, { key: '1c127fa09435af89c2f07226d70438c7ac261cfb', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '853c86c1d0309155797d9a15433982e4765f941c', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'ac3b422be11179ab00accc348cfbd334393d2745', 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: '9cd94e14becf8789e3eb21500eb1eb9aafc79c7a' }, h(TableFootRow, { key: '2a8232066a55771805b34bee43af9c0dbdbe5047' }, h(TableFootCell, { key: '4c44e77eab9e1db423ef5bad6fc9137e82b625f3', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'b25056fffc760aba956a6e40fceb29f995a144be', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: '786e5a316c151acfbe4c002e578956ad1730e524' }, h(TableComponent, { key: '117086f0be468f4d50d160f8c982b93afb4b6a1b' }, h(TableHead, { key: '47433c343abf3c97e95b6cdcc2ca3a8c9bb23ae8' }, h(TableHeadRow, { key: '24403b1c5f408381e388ffe33af5823c5176a254' }, this.payoutsTable.columnData.map((column) => column))), h(TableBody, { key: '1c8c09b4cea871e728d20836156b8ebda1d72276' }, h(TableLoadingState, { key: 'bf038ef4c07745436168203a484e5e346356d48d', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '1fbe3787afb507258272f3e500f72ee9d4c5f7e9', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: '256e3ea344eada4001c65ee31eb2356e63242b40', 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: '174590a65c18b9644c5ca7e39b384f973de4690a' }, h(TableFootRow, { key: 'd9dab09c6f24eeded0328c559b7842a543cd1fa2' }, h(TableFootCell, { key: 'bd7c7917dc2c31dccf731617000c664f6c1bed51', colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '131a5000ad0378948411c34287471734a8575491', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get is() { return "payouts-list-core"; }
     static get properties() {